کار بار اسکرول بار و Detect کردن عناصر

[mrgraphy]

سلام دوستان.
خوب اگه دقت کرده باشید تو بعضی از وب سایت ها مثل فیس بوک وقتی شما به آخر مطالب میرسید مطالب جدید تر به صورت Ajax لود میشن و تو صفحه قرار میگیرند.
اما نکته اینجا وقتی که شما اون باکس حاوی مطالب رو ازش حتی 1 پیکش رد میشید شروع میکنه به لود صفحات و نیازی نیست که حتما اسکرول بار شما به آخر صفحه برسه.
متاسفانه من خودم این مشکل رو داشتم و گشتم اما چیزی پیدا نکردم تا اینکه بلاخره بعد از چند ساعت روش های مختلف رو تست کردن نتیجه گرفتم.

این کدش هست.


$(window).bind('scroll', function() {
if($(window).scrollTop() >= $('.posts').offset().top + $('.posts').outerHeight() - window.innerHeight) {
alert('end reached');
}
});


اول میگیم وقتی پنجره اسکرول شد بیاد مقداری که از بالا فاصله گرفته رو مقایسه کنه با مقداری که اون عنصر مورد نظر ما از بالا فاصله داره + ارتفاع عنصر مورد نظر - طول خود پنجره اگر بزرگتر یا مساوی بود به ما یک alert بده که حالا شما میتونید جاش یه کد ajax بزارید براتون مطالب رو لود بکنه.
offset().top فاصله عنصر مورد نظر از بالا رو نشون میده.از بالای صفحه.
outerHeight() ارتفاع یا همون height عنصر رو نشون میده. شاید بگید پچرا از height استفاده نکردیم به این دلیل که متد height فقط ارتفاع رو بدون محاسبه border ها و padding ها نشون میده اما این متد همه رو محاسبه میکنه و ارتفاع واقعی رو شنون میده.
و اما از همه مهم تر.چرا به جای استفاده از $(window).height(); از window.innerHeight استفاده کردم. به این دلیل که حالت اول جای ارتفاع پنجره ارتفاع کل صفحه رو نشون میده و دقیقا کارش با $(document).height(); یکی هست و این جز یکی از bug های jquery هستش که حالا تو وبلاگشون نوشتن بر طرفش میکنن.

و در آخر اینم کدی که من زدم برای سایت شرکتمون.


var Status = false;
$(window).scroll(function(){
if($(document).find('.loaderajax').length > 0) {
//if($(window).scrollTop() == $(document).height() - window.innerHeight){
if($(window).scrollTop() >= $('.posts').offset().top + $('.posts').outerHeight() - window.innerHeight){
var postdate ='' ,category='';
if($(document).find('input[name=postdate]').length > 0) {
postdate = $(document).find('input[name=postdate]').val();
}else if($(document).find('input[name=category]').length > 0) {
category = $(document).find('input[name=category]').val();
}
var pagination = $(document).find('input[name=pagination]').val();
if($(document).find('.nomorepost').length == 0 && Status == false){
Status = true;
$('.posts').append('<div class="loadpost alert alert-info">در حال بار گذاری...<br /><div class="progress progress-striped active"><div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div></div></div>');
$.ajax({
type: 'POST',
url: "http://-----/public/Ajax.php",
data: "action=blogload&pagination="+pagination+"&category="+category+"&postdate="+postdate,
success: function(html) {
$('.loadpost').remove();
$('.posts').append(html);
var pages = pagination.split(',');
pagination = (parseInt(pages[0])+parseInt(pages[1]))+','+pages[1];
$(document).find('input[name=pagination]').val(pagination);
Status = false;
},
error:function(){
alert('خطایی در ارسال داده ها به وجد آمده است.مجددا سعی کنید');
Status = false;
}
});
}
}
}
});