判斷滾動條到底部的JS代碼
阿新 • • 發佈:2018-12-26
元素 div his js代碼 body var scrip get 區域
判斷滾動條到底部,需要用到DOM的三個屬性值,即scrollTop、clientHeight、scrollHeight。
scrollTop為滾動條在Y軸上的滾動距離。
clientHeight為內容可視區域的高度。
scrollHeight為內容可視區域的高度加上溢出(滾動)的距離。
從這個三個屬性的介紹就可以看出來,滾動條到底部的條件即為scrollTop + clientHeight == scrollHeight。
廢話不多少說,趕緊上代碼(兼容不同的瀏覽器)。
//滾動條在Y軸上的滾動距離 function getScrollTop(){ var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0; if(document.body){ bodyScrollTop = document.body.scrollTop; } if(document.documentElement){ documentScrollTop = document.documentElement.scrollTop; } scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop; return scrollTop; } //文檔的總高度 function getScrollHeight(){ var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0; if(document.body){ bodyScrollHeight = document.body.scrollHeight; } if(document.documentElement){ documentScrollHeight = document.documentElement.scrollHeight; } scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight; return scrollHeight; } //瀏覽器視口的高度 function getWindowHeight(){ var windowHeight = 0; if(document.compatMode == "CSS1Compat"){ windowHeight = document.documentElement.clientHeight; }else{ windowHeight = document.body.clientHeight; } return windowHeight; } window.onscroll = function(){ if(getScrollTop() + getWindowHeight() == getScrollHeight()){ alert("you are in the bottom!"); } };
如果用jquery來實現的話就更簡單了,
$(window).scroll(function(){ var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if(scrollTop + windowHeight == scrollHeight){ alert("you are in the bottom"); } });
如果要判斷在某一個元素中的滾動條是否到底部,根據類似的思想,將document.body換成特定的元素即可,獲取scrollTop和scrollHeight的方式是一樣的,但是獲取元素可見高度需要用到offsetHeight屬性,直接依葫蘆畫瓢即可。
判斷滾動條到底部的JS代碼