javascript - scroll教學 - scroll full page




檢查用戶是否滾動到底部 (12)

Nick Craver的答案正常, $(document).height()因瀏覽器而異的問題。

為了使它在所有瀏覽器上都能正常工作,請使用James Padolsey的這個函數:

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

代替$(document).height() ,以便最終的代碼是:

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

我正在製作一個分頁系統(有點像Facebook),當用戶滾動到底部時,內容加載。 我想最好的方法是找到用戶何時位於頁面底部並運行ajax查詢來加載更多帖子。

唯一的問題是我不知道如何檢查用戶是否用jQuery滾動到頁面底部。 有任何想法嗎?

我需要找到一種方法來檢查用戶何時使用jQuery滾動到頁面的底部。


Nick Craver的答案需要稍加修改才能在iOS 6 Safari Mobile上工作,應該是:

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

$(window).height()更改 window.innerHeight應該這樣做,因為當地址欄被隱藏時,窗口的高度將增加60px,但使用$(window).height()不會反映此更改,而使用window.innerHeight

注意window.innerHeight屬性還包含水平滾動條的高度(如果它被渲染),不像$(window).height() ,它不包括水平滾動條的高度。 這在Mobile Safari中不是問題,但可能會在其他瀏覽器或未來版本的Mobile Safari中導致意外行為。 將==更改為>=可以解決最常見的用例。

閱讀更多關於window.innerHeight屬性


停止重複提醒尼克的答案

ScrollActivate();

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

對於那些使用Nick的解決方案並重複發出警報/事件觸發的人,可以在警報示例上添加一行代碼:

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

這意味著代碼只會在您第一次處於文檔底部100px範圍內時觸發。 如果您向後滾動,然後再向下滾動,則不會重複,這取決於您使用的是Nick的代碼,這可能有用也可能不會有用。


我不完全確定為什麼這還沒有發布,但根據MDN的文檔 ,最簡單的方法是使用原生javascript屬性:

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

當您位於任何可滾動元素的底部時,返回true。 所以簡單地使用javascript:

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

scrollHeight在瀏覽器中有廣泛的支持,從8到更精確,而clientHeightscrollTop都受到每個人的支持。 即使ie 6.這應該是跨瀏覽器的安全。


我使用@ddanone answear並添加了Ajax調用。

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

}


請檢查這個答案

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

你可以做footerHeight - document.body.offsetHeight來查看你是在附近的頁腳還是到達了頁腳


讓我看看沒有JQuery。 簡單的JS功能:

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

這是我的兩分錢:

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

這裡有一段代碼可以幫助你調試你的代碼,我測試了上面的答案,發現它們是錯誤的。 我在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;">

我希望這可以節省一些時間。


window上使用.scroll()事件,如下所示:

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

你可以在這裡測試這個版本 ,只需將它調整到你想觸發底部的任何像素。


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

它計算距離滾動條到元素的底部。 等於0,如果滾動條已達到底部。





pagination