집 >웹 프론트엔드 >JS 튜토리얼 >웹 페이지가 브라우저 하단으로 스크롤되었는지 여부를 확인하는 jQuery의 자세한 예

웹 페이지가 브라우저 하단으로 스크롤되었는지 여부를 확인하는 jQuery의 자세한 예

小云云원래의: 2017-12-26 15:24:491532검색

일부 요구 사항에서는 사용자가 브라우저 하단으로 스크롤할 때 새 콘텐츠를 로드해야 합니다. 여기서 저자는 Jquery를 사용하여 사용자가 웹 페이지 하단까지 탐색했는지 확인하는 방법을 소개합니다. 이 기사는 주로 웹 페이지가 브라우저 하단으로 스크롤되었는지 확인하는 jQuery를 공유합니다. 이것이 모든 사람에게 도움이 되기를 바랍니다.

다음 지식 포인트를 이해하기 전에 저자는 여기서 몇 가지 개념을 소개합니다.

$(window).height(); //브라우저 표시 영역의 높이를 가져오는 데 사용됩니다.

$(window).width() //브라우저 표시 영역의 너비를 가져오는 데 사용됩니다.

$( document.body).height(); //페이지 높이 가져오기 document

$(document.body).width() //페이지 너비 가져오기 document

$(document).scrollTop() ; //세로 스크롤 막대에서 위쪽까지의 세로 거리 가져오기

$(document).scrollLeft(); //가로 스크롤 막대에서 왼쪽까지의 가로 거리 가져오기

위의 지식 포인트를 통해 알 수 있는 정보: 브라우저 표시 영역의 높이 + 수직 스크롤 막대 거리 상단 거리 <=웹 페이지의 높이.

이 결론으로 구현하기 쉽습니다. 다음 코드는 사용자가 웹 페이지 하단까지 탐색했는지 여부를 확인하기 위해 구현됩니다.

 $(window).scroll(function(){
 var h=$(document.body).height();//网页文档的高度
 var c = $(document).scrollTop();//滚动条距离网页顶部的高度
 var wh = $(window).height(); //页面可视化区域高度

 if (Math.ceil(wh+c)>=h){
  alert("我已经到底部啦");
 }
 })

사용자가 특정 요소를 탐색했는지 확인해야 하는 경우 위의 웹 페이지 문서 높이를 특정 요소와 웹 페이지 상단 사이의 거리로 변경하기만 하면 됩니다. 예:

 $(window).scroll(function(){
 var h=$("#p").offset().top;//id为p的元素距离网页顶部的距离
 var c = $(document).scrollTop();//滚动条距离网页顶部的高度
 var wh = $(window).height(); //页面可视化区域高度

 if (Math.ceil(wh+c)>=h){
  alert("我已经到底部啦");
 }
 })

여기서 독자들은 판단 조건에서 wh+c가 이 숫자보다 크거나 같은 가장 작은 정수라는 점에 유의해야 합니다. 작성자의 테스트 결과 IE7, 8, 9, 11에서는 문제가 없습니다.

다음으로 작성자는 위 코드를 플러그인으로 캡슐화합니다.

(function ($) {
  //backcall是回调函数，count表示回调函数被执行的次数，count只有在元素通过滚动条滑出的时候才起作用
 $.fn.inBottom = function (backcall){
 //判断当前元素是否在目前屏幕可视化区域之内
 if(this.offset().top >= $(window).height()){
 this.inScroll(backcall,count);
 }else{
 this.inWindow(backcall);
 }
 };
 //直接加载回调函数
 $.fn.inWindow = function (backcall){
 backcall();
 };
 //滚动监听滑动条，元素滚动到屏幕底部的时候，加载回调函数
 $.fn.inScroll = function (backcall,count) {
  var $this=this;
 $(window).scroll(function(){
 //获得这个元素到文档顶部的距离
 var awayDocTop=$this.offset().top;
 //获得滚动条的top
 var sTop=$(document).scrollTop();
 //获得可视化窗口的高度
 var wh=$(window).height();
  if(Math.ceil(wh+sTop)>=awayDocTop){
  if(count>0){
  backcall();
  count--;
  }
 };
 });
 };
})(jQuery);

그러면 독자들은 위의 플러그인 파일을 소개한 후 다음과 유사한 코드를 통해 호출할 수 있습니다.

$("#p").inBottom(function(){
 alert("我被回调了");
},1);

웹 페이지가 브라우저 하단으로 스크롤되었는지 여부를 확인하는 jQuery의 자세한 예

관련 기사