首頁 > web前端 > js教程 > 如何用javascript判斷滾動條到底部程式碼實例詳解

如何用javascript判斷滾動條到底部程式碼實例詳解

伊谢尔伦
發布: 2017-07-19 15:58:47
原創
1221 人瀏覽過

判斷捲軸到底部,需要用到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屬性,直接依葫蘆畫瓢即可。

以上是如何用javascript判斷滾動條到底部程式碼實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板