javascript - بوتستراب - تحميل مكتبة jquery




تحقق مما إذا كان المستخدم قد التمرير إلى الأسفل (12)

اسمحوا لي أن أعرض approch دون JQuery. وظيفة شبيبة بسيطة:

function isVisible(elem) {
  var coords = elem.getBoundingClientRect();
  var topVisible = coords.top > 0 && coords.top < 0;
  var bottomVisible = coords.bottom < shift && coords.bottom > 0;
  return topVisible || bottomVisible;
}

مثال قصير على كيفية استخدامها:

var img = document.getElementById("pic1");
    if (isVisible(img)) { img.style.opacity = "1.00";  }

أقوم بإنشاء نظام ترقيم الصفحات (مثل Facebook) حيث يتم تحميل المحتوى عند تمرير المستخدم إلى الأسفل. أتخيل أن أفضل طريقة للقيام بذلك هي العثور على عندما يكون المستخدم في أسفل الصفحة وتشغيل استعلام ajax لتحميل المزيد من المشاركات.

المشكلة الوحيدة هي أنني لا أعرف كيفية التحقق مما إذا كان المستخدم قد التمرير إلى أسفل الصفحة مع jQuery. أيه أفكار؟

أحتاج إلى البحث عن طريقة للتحقق من مرور المستخدم إلى أسفل الصفحة باستخدام jQuery.


اعتدتddanone أجاب وأضاف مكالمة أياكس.

$('#mydiv').on('scroll', function(){
  function infiniScroll(this);
});

function infiniScroll(mydiv){
console.log($(mydiv).scrollTop()+' + '+ $(mydiv).height()+' = '+ ($(mydiv).scrollTop() + $(mydiv).height())   +' _ '+ $(mydiv)[0].scrollHeight  );

if($(mydiv).scrollTop() + $(mydiv).height() == $(mydiv)[0].scrollHeight){
    console.log('bottom found');
    if(!$.active){ //if there is no ajax call active ( last ajax call waiting for results ) do again my ajax call
        myAjaxCall();
    }
}

}


بالنسبة لأولئك الذين يستخدمون حل Nick والحصول على التنبيهات / الأحداث المتكررة ، يمكنك إضافة سطر من التعليمة البرمجية أعلى مثال التنبيه:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       alert("near bottom!");
   }
});

وهذا يعني أن الشفرة ستطلق أول مرة تبلغ 100 بكسل في أسفل المستند. لن يتكرر ذلك إذا قمت بالتمرير احتياطيًا ثم التراجع ، وهو ما قد يكون مفيدًا أو لا يكون مفيدًا اعتمادًا على ما تستخدمه لرمز Nick.


تحتاج إجابة Nick Craver إلى تعديل بسيط للعمل على iOS 6 Safari Mobile ويجب أن يكون:

$(window).scroll(function() {
   if($(window).scrollTop() + window.innerHeight == $(document).height()) {
       alert("bottom!");
   }
});

يجب تغيير $ (نافذة) .height () إلى window.innerHeight لأنه عندما يتم إخفاء شريط العنوان يتم إضافة 60px إضافية إلى ارتفاع النافذة ولكن باستخدام $(window).height() لا يعكس هذا التغيير ، أثناء استخدام window.innerHeight لا.

ملاحظة : تتضمن الخاصية window.innerHeight أيضًا ارتفاع شريط التمرير الأفقي (إذا تم تقديمه) ، على عكس $(window).height() الذي لن يتضمن ارتفاع شريط التمرير الأفقي. هذه ليست مشكلة في Mobile Safari ، ولكنها قد تسبب سلوكًا غير متوقع في المتصفحات الأخرى أو الإصدارات المستقبلية من Mobile Safari. يمكن أن يؤدي التغيير == إلى >= إصلاح هذا في معظم حالات الاستخدام الشائعة.

قراءة المزيد عن الخاصية window.innerHeight here


في ما يلي جزء من الشفرة سيساعدك في تصحيح شفرتك ، وقد جربت الإجابات المذكورة أعلاه ووجدت أنها تحتوي على عربات التي تجرها الدواب. لقد اختبرت ما يلي على Chrome و IE و Firefox و IPad (Safari). ليس لدي أي تركيب آخر لاختبار ...

<script type="text/javascript">
   $(function() {
      $(window).scroll(function () {
         var docElement = $(document)[0].documentElement;
         var winElement = $(window)[0];

         if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
            alert('bottom');
         }
      });
   });
</script>

قد يكون هناك حل أبسط ، لكنني توقفت عند النقطة التي تعمل فيها IT

إذا كنت لا تزال تواجه مشكلات مع بعض المتصفحات المارقة ، فإليك بعض التعليمات البرمجية لمساعدتك في تصحيح الأخطاء:

<script type="text/javascript">
   $(function() {
      $(window).scroll(function () {
         var docElement = $(document)[0].documentElement;
         var details = "";
         details += '<b>Document</b><br />';
         details += 'clientHeight:' + docElement.clientHeight + '<br />';
         details += 'clientTop:' + docElement.clientTop + '<br />';
         details += 'offsetHeight:' + docElement.offsetHeight + '<br />';
         details += 'offsetParent:' + (docElement.offsetParent == null) + '<br />';
         details += 'scrollHeight:' + docElement.scrollHeight + '<br />';
         details += 'scrollTop:' + docElement.scrollTop + '<br />';

         var winElement = $(window)[0];
         details += '<b>Window</b><br />';
         details += 'innerHeight:' + winElement.innerHeight + '<br />';
         details += 'outerHeight:' + winElement.outerHeight + '<br />';
         details += 'pageYOffset:' + winElement.pageYOffset + '<br />';
         details += 'screenTop:' + winElement.screenTop + '<br />';
         details += 'screenY:' + winElement.screenY + '<br />';
         details += 'scrollY:' + winElement.scrollY + '<br />';

         details += '<b>End of page</b><br />';
         details += 'Test:' + (docElement.scrollHeight - winElement.innerHeight) + '=' + winElement.pageYOffset + '<br />';
         details += 'End of Page? ';
         if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
             details += 'YES';
         } else {
             details += 'NO';
         }

         $('#test').html(details);
      });
   });
</script>
<div id="test" style="position: fixed; left:0; top: 0; z-index: 9999; background-color: #FFFFFF;">

آمل أن يؤدي هذا إلى إنقاذ شخص ما بعض الوقت.


كل هذه الحلول لا تعمل لي على Firefox و Chrome ، لذلك أستخدم وظائف مخصصة من Miles O'Keefe و meder omuraliev مثل:

function getDocHeight()
{
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

function getWindowSize()
{
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return [myWidth, myHeight];
}

$(window).scroll(function()
{
    if($(window).scrollTop() + getWindowSize()[1] == getDocHeight())
    {
        alert("bottom!");
    }
});

لوقف التنبيه المتكرر لإجابة نيك

ScrollActivate();

function ScrollActivate() {
    $(window).on("scroll", function () {
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
            $(window).off("scroll");
            alert("near bottom!");
        }
    });
}

هذه سنتي

$('#container_element').scroll( function(){
        console.log($(this).scrollTop()+' + '+ $(this).height()+' = '+ ($(this).scrollTop() + $(this).height())   +' _ '+ $(this)[0].scrollHeight  );
        if($(this).scrollTop() + $(this).height() == $(this)[0].scrollHeight){
            console.log('bottom found');
        }
    });

يجيب نيك بخيره ، ولكن سيكون لديك وظائف تكرر نفسه أثناء التمرير أو لن تعمل على الإطلاق إذا كان لدى المستخدم إطار تكبير. لقد توصلت إلى حل سهل في الرياضيات. حول الارتفاع الأول وهو يعمل كما يفترض.

    if (Math.round($(window).scrollTop()) + $(window).innerHeight() == $(document).height()){
    loadPagination();
    $(".go-up").css("display","block").show("slow");
}

يرجى التحقق من هذه الإجابة

 window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
       console.log("bottom");
    }
};

يمكنك عمل footerHeight - document.body.offsetHeight لمعرفة ما إذا كنت بالقرب من التذييل أو وصلت إلى التذييل


استخدم .scroll() الحدث على window ، مثل هذا:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});

يمكنك اختباره هنا ، وهذا يأخذ التمرير العلوي للنافذة ، لذلك مقدار التمرير لأسفل ، يضيف ارتفاع الإطار المرئي ويتحقق مما إذا كان ذلك يساوي ارتفاع المحتوى الكلي ( document ). إذا كنت تريد بدلاً من ذلك التحقق مما إذا كان المستخدم بالقرب من الجزء السفلي ، فسيبدو شيئًا كالتالي:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       alert("near bottom!");
   }
});

يمكنك اختبار هذا الإصدار هنا ، فقط قم بضبط 100 إلى أي بكسل من الأسفل الذي تريد تشغيله.


var elemScrolPosition = elem.scrollHeight - elem.scrollTop - elem.clientHeight;

يقوم بحساب شريط التمرير عن بعد إلى أسفل العنصر. يساوي 0 ، إذا وصل شريط التمرير إلى القاع.





pagination