> 웹 프론트엔드 > JS 튜토리얼 > 스크롤 막대가 아래쪽에 도달했는지 확인하기 위해 자바스크립트를 사용하는 방법에 대한 자세한 코드 예

스크롤 막대가 아래쪽에 도달했는지 확인하기 위해 자바스크립트를 사용하는 방법에 대한 자세한 코드 예

伊谢尔伦
풀어 주다: 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를 특정 요소로 바꾸면 됩니다. 요소 및 get scrollTop 및 scrollHeight의 메소드는 동일하지만 요소의 표시 높이를 얻으려면 offsetHeight 속성을 사용해야 하며 메소드를 따르기만 하면 됩니다.

위 내용은 스크롤 막대가 아래쪽에 도달했는지 확인하기 위해 자바스크립트를 사용하는 방법에 대한 자세한 코드 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿