WEB 頁面滾動條 相關操作
阿新 • • 發佈:2019-01-29
例項:當滾動條滾動到頁面底部時,執行相應的函式
方法一:
當一個元素的實際高度超過其顯示區域的高度時,在一定的設定下,瀏覽器會為該元素顯示相應的垂直滾動條。此時,scrollTop()返回的就是該元素 在可見區域之上被隱藏部分的高度(單位:畫素)。
如果垂直滾動條在最上面(也就是可見區域之上沒有被隱藏的內容),或者當前元素是不可垂直滾動的,那麼scrollTop()將返回0。
$(window).on('scroll', function () { if (that.scrollTimer) { clearTimeout(that.scrollTimer); } that.scrollTimer = setTimeout(function(){注: $doc = $(document):獲取當前頁面元素的jQuery物件 $doc.height():當前頁面高度 $(self).height():滾動條高度 $doc.scrollTop():滾動條距頁面頂端的長度 正常情況下,當滾動條滾動到頁面底部時:$doc.height() = $(self).height() + $doc.scrollTop() 擴充套件: 1、scrollTop()函式用於設定或返回當前匹配元素相對於垂直滾動條頂部的偏移。var $doc = $(document);if(!that.isPending && ($doc.height() - ($(self).height()+$doc.scrollTop())<= that.loadMoreScroll)){function(){ …… }}}, that.scrollDelay); }); 方法二: $(document).ready(function() { $(window).scroll(function() { if ($(document).scrollTop()<=0){ alert("滾動條已經到達頂部為0"); } if ($(document).scrollTop() >= $(document).height() - $(window).height()) {alert("滾動條已經到達底部為" + $(document).scrollTop()); } }); });