Bir kullanıcının en alta kaydırdığını kontrol edin

Kullanıcı aşağıya kaydırdığında içeriğin yüklendiği bir sayfalama sistemi (Facebook gibi bir tür) yapıyorum. Bunu yapmak için en iyi yolu kullanıcı sayfanın altında olduğunda bulmak ve daha fazla yazı yüklemek için bir ajax sorgusu çalıştırmak olduğunu düşünün.

Tek sorun kullanıcı jQuery ile sayfanın altına kaydırılmış olup olmadığını kontrol etmek bilmiyorum. Herhangi bir fikir?

Kullanıcı jQuery ile sayfanın altına kaydırdığında kontrol etmek için bir yol bulmak gerekir.

.scroll()Etkinliği şu şekilde kullanın window:

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

Burada test edebilirsiniz , bu pencerenin üst kaydırmasını alır, böylece ne kadar aşağı kaydırılır, görünür pencerenin yüksekliğini ekler ve bunun genel içeriğin yüksekliğine ( document) eşit olup olmadığını kontrol eder . Bunun yerine, kullanıcının en alta yakın olup olmadığını kontrol etmek isterseniz, şöyle görünecektir:

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

Bu sürümü burada test edebilirsiniz , sadece 100alttan tetiklemek istediğiniz piksele ayarlayın .

Nick Craver'ın cevabı iyi çalışıyor, değerin $(document).height()tarayıcıya göre değiştiği sorununu ortadan kaldırıyor .

Tüm tarayıcılarda çalışmasını sağlamak için James Padolsey'deki bu işlevi kullanın :

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
    );
}

yerine $(document).height(), son kod:

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

Bunun henüz gönderilmediğinden tam olarak emin değilim, ancak MDN'den gelen belgelere göre , en basit yol yerel javascript özelliklerini kullanmaktır:

element.scrollHeight - element.scrollTop === element.clientHeight

Kaydırılabilir herhangi bir öğenin altında olduğunuzda true değerini döndürür. Basitçe javascript kullanarak:

element.addEventListener('scroll', function(event)
{
    var element = event.target;
    if (element.scrollHeight - element.scrollTop === element.clientHeight)
    {
        console.log('scrolled');
    }
});

scrollHeightiken yani 8, daha doğrusu gelen, tarayıcılarda geniş desteğe sahip clientHeightve scrollTopher ikisi de herkes tarafından desteklenmektedir. Hatta yani 6. Bu, tarayıcılar arası güvenli olmalıdır.

Nick'in çözümünü kullananlar ve tekrarlanan uyarılar / olaylar tetikleniyorsa, uyarı örneğinin üzerine bir kod satırı ekleyebilirsiniz:

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

Bu, kodun yalnızca dokümanın alt kısmının 100 piksel yakınında olduğunuzda tetikleneceği anlamına gelir. Nick'in kodunu ne için kullandığınıza bağlı olarak yararlı olabilir veya olmayabilir, yukarı ve daha sonra geri kaydırırsanız tekrarlanmayacaktır.

Nick Craver'ın kabul edilen mükemmel cevabına ek olarak, scroll olayını çok sık tetiklenmemesi için kısıtlayabilir ve böylece tarayıcı performansını artırabilirsiniz :

var _throttleTimer = null;
var _throttleDelay = 100;
var $window = $(window);
var $document = $(document);

$document.ready(function () {

    $window
        .off('scroll', ScrollHandler)
        .on('scroll', ScrollHandler);

});

function ScrollHandler(e) {
    //throttle event:
    clearTimeout(_throttleTimer);
    _throttleTimer = setTimeout(function () {
        console.log('scroll');

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

    }, _throttleDelay);
}

Nick Craver'ın cevabının iOS 6 Safari Mobile'da çalışması için biraz değiştirilmesi gerekiyor ve şunlar olmalı:

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

Değişen $ (pencere) .height () için window.innerHeight adres çubuğu gizli olduğunda ek bir 60px pencerenin yüksekliğine eklenen ancak kullanarak çünkü yapılmalıdır $(window).height()yok değil bu değişiklik kullanırken, window.innerHeightyapar.

Not : window.innerHeightÖzellik, yatay kaydırma çubuğunun yüksekliğini $(window).height()içermeyecek şekilde, yatay kaydırma çubuğunun yüksekliğini de (oluşturulmuşsa) içerir. Bu, Mobil Safari'de bir sorun değildir, ancak diğer tarayıcılarda veya Mobile Safari'nin gelecekteki sürümlerinde beklenmedik davranışlara neden olabilir. Bunu değiştirmek ==, >=en yaygın kullanım durumlarında bunu düzeltebilir.

window.innerHeightTesis hakkında daha fazla bilgiyi buradan edinebilirsiniz

İşte oldukça basit bir yaklaşım

const didScrollToBottom = elm.scrollTop + elm.clientHeight == elm.scrollHeight

Misal

elm.onscroll = function() {
    if(elm.scrollTop + elm.clientHeight == elm.scrollHeight) {
        // User has scrolled to the bottom of the element
    }
}

İe'den elmalınan bir eleman nerede document.getElementById.

Kodunuzu hata ayıklamanıza yardımcı olacak bir kod parçası, yukarıdaki cevapları test ettim ve buggy olduklarını gördüm. Chrome, IE, Firefox, IPad (Safari) ile ilgili aşağıdakileri test ettim. Test etmek için başka yüklü değilim ...

<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>

Orada daha basit bir çözüm olabilir, ama ben hangi noktada durdu olabilir BT ÇALIŞTI

Bazı sahtekar tarayıcılarda hala sorun yaşıyorsanız, hata ayıklamanıza yardımcı olacak bazı kodlar şunlardır:

<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;">

Umarım bu biraz zaman kazanır.

Lütfen bu cevabı kontrol edin

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

Sen yapabilirsin footerHeight - document.body.offsetHeightsen altbilgi yakınlarında veya altbilgi ulaştı olmadığını görmek için

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

Öğenin altına kadar olan mesafe kaydırma çubuğunu hesaplar. Kaydırma çubuğu alta ulaştıysa 0'a eşittir.

Bu benim iki sentim:

$('#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');
        }
    });

Saf JS ile çapraz tarayıcı ve zıplamaölçer (Oldukça iyi performans )

var CheckIfScrollBottom = debouncer(function() {
    if(getDocHeight() == getScrollXY()[1] + window.innerHeight) {
       console.log('Bottom!');
    }
},500);

document.addEventListener('scroll',CheckIfScrollBottom);

function debouncer(a,b,c){var d;return function(){var e=this,f=arguments,g=function(){d=null,c||a.apply(e,f)},h=c&&!d;clearTimeout(d),d=setTimeout(g,b),h&&a.apply(e,f)}}
function getScrollXY(){var a=0,b=0;return"number"==typeof window.pageYOffset?(b=window.pageYOffset,a=window.pageXOffset):document.body&&(document.body.scrollLeft||document.body.scrollTop)?(b=document.body.scrollTop,a=document.body.scrollLeft):document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop)&&(b=document.documentElement.scrollTop,a=document.documentElement.scrollLeft),[a,b]}
function getDocHeight(){var a=document;return Math.max(a.body.scrollHeight,a.documentElement.scrollHeight,a.body.offsetHeight,a.documentElement.offsetHeight,a.body.clientHeight,a.documentElement.clientHeight)}

Demo: http://jsbin.com/geherovena/edit?js,output

Not: Debouncer, getScrollXY, getDocHeightbenim tarafımdan yazılmamış

Sadece nasıl çalıştığını ve nasıl yapacağımı gösteriyorum

Düz js benim çözüm:

let el=document.getElementById('el');
el.addEventListener('scroll', function(e) {
    if (this.scrollHeight - this.scrollTop - this.clientHeight<=0) {
        alert('Bottom');
    }
});

#el{
  width:400px;
  height:100px;
  overflow-y:scroll;
}

<div id="el">
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
</div>

Alt uçta ilerleyin, eşleşme koşulu için bunu deneyin

if ($(this)[0].scrollHeight - $(this).scrollTop() == 
    $(this).outerHeight()) {

    //code for your custom logic

}

Nick iyi yanıt verir, ancak kaydırma sırasında kendini tekrarlayan veya kullanıcı yakınlaştırılmış pencereye sahipse hiç çalışmayan işlevlere sahip olacaksınız. Ben sadece math.round ilk yükseklik etrafında kolay bir düzeltme ile geldi ve varsayıldığı gibi çalışır.

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

Aşağıdaki kodu deneyebilirsiniz,

$("#dashboard-scroll").scroll(function(){
    var ele = document.getElementById('dashboard-scroll');
    if(ele.scrollHeight - ele.scrollTop === ele.clientHeight){
       console.log('at the bottom of the scroll');
    }
});

Bu, kaydırılabilir bir öğeyi kontrol ederken (yani değil window) doğru sonuçlar verir :

// `element` is a native JS HTMLElement
if ( element.scrollTop == (element.scrollHeight - element.offsetHeight) )
    // Element scrolled to bottom

offsetHeightvermelidir gerçek görünür (dolgu, bir farkla, aşağıdakileri içeren bir elemanın yüksekliği ve kaydırma) ve scrollHeightbir bütün görünmez (taştı) alanlar da dahil olmak üzere bir elemanın yüksekliği.

jQuery'nin .outerHeight()JS en benzer bir sonuç vermelidir .offsetHeight- MDN'yi belgeleri için offsetHeightonun çapraz tarayıcı desteği hakkında belirsizdir. Daha fazla seçeneği kapsamak için bu daha eksiksizdir:

var offsetHeight = ( container.offsetHeight ? container.offsetHeight : $(container).outerHeight() );
if  ( container.scrollTop == (container.scrollHeight - offsetHeight) ) {
   // scrolled to bottom
}

Tüm bu çözümler Firefox ve Chrome'da benim için çalışmıyor, bu yüzden Miles O'Keefe ve meder omuraliev'in özel işlevlerini şöyle kullanıyorum :

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!");
    }
});

İşte benim kabul ettiğim cevap benim için işe yaramadığı için iki sentim.

var documentAtBottom = (document.documentElement.scrollTop + window.innerHeight) >= document.documentElement.scrollHeight;

Scroll olayını dinlemek yerine, Kesişim Gözlemcisi'ni kullanmak , son öğenin görünüm alanında görünüp görünmediğini kontrol etmek için ucuz olanıdır (bu, kullanıcının aşağıya kaydırıldığı anlamına gelir). Ayrıca çoklu dolgulu IE7 için de desteklenir .

var observer = new IntersectionObserver(function(entries){
   if(entries[0].isIntersecting === true)
      console.log("Scrolled to the bottom");
   else
      console.log("Not on the bottom");
}, {
   root:document.querySelector('#scrollContainer'),
   threshold:1 // Trigger only when whole element was visible
});

observer.observe(document.querySelector('#scrollContainer').lastElementChild);

#scrollContainer{
  height: 100px;
  overflow: hidden scroll;
}

<div id="scrollContainer">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>
  <div>Item 10</div>
</div>

JQuery olmadan yaklaşımı göstereyim. Basit JS işlevi:

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;
}

Kısa bir örnek:

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

@Ddanone yanıtlama kullandım ve Ajax çağrısı ekledim.

$('#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'in cevabının tekrarlanan uyarısını durdurmak için

ScrollActivate();

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

Aradığınızda Google Chrome sayfanın tam yüksekliğini verir $(window).height()

Bunun yerine, window.innerHeightpencerenizin yüksekliğini almak için kullanın . Gerekli kontrol şöyle olmalıdır:

if($(window).scrollTop() + window.innerHeight > $(document).height() - 50) {
    console.log("reached bottom!");
}

Görünüşe göre benim için işe yarayan şey 'vücut' idi ve 'pencere' böyle değildi:

$('body').scroll(function() {


 if($('body').scrollTop() + $('body').height() == $(document).height()) {
     //alert at buttom
 }
 });

tarayıcılar arası uyumluluk kullanımı için:

  function getheight(){
    var doc = document;
    return  Math.max(
        doc.body.scrollHeight, doc.documentElement.scrollHeight,
        doc.body.offsetHeight, doc.documentElement.offsetHeight,
        doc.body.clientHeight, doc.documentElement.clientHeight

        );
   }

ve sonra $ (document) .height () yerine getheight () işlevini çağırın

$('body').scroll(function() {


   if($('body').scrollTop() + $('body').height() == getheight()  ) {
     //alert at bottom
 }
});

yakın alt kullanım için:

$('body').scroll(function() {


if($('body').scrollTop() + $('body').height() > getheight() -100 ) {
    //alert near bottom
 }
 });