jQuery는 웹 페이지 하단으로 탐색할지 여부를 결정합니다.

이번에는 브라우저가 웹 페이지 하단에 도달했는지 확인하는 jQuery를 소개합니다. 브라우저가 웹 페이지 하단에 도달했는지 확인하기 위한 jQuery의 주의 사항은 무엇입니까? 보세요.

어떤 경우에는 사용자가 브라우저 하단으로 스크롤할 때 새 콘텐츠를 로드해야 합니다. 여기서 저자는 Jquery를 사용하여 사용자가 웹 페이지 하단까지 탐색했는지 확인하는 방법을 소개합니다.

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

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

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

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

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

$(document).scrollTop(); //세로 스크롤바에서 상단까지의 세로 거리를 구합니다

$(document).scrollLeft(); //가로 스크롤 막대에서 왼쪽으로의 가로 거리를 가져옵니다.

위의 지식 포인트를 통해 다음을 알 수 있습니다: 브라우저 표시 영역의 높이 + 수직 스크롤 막대에서 상단까지의 거리

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

rreee

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

 $(window).scroll(function(){
 var h=$(document.body).height();//网页文档的高度
 var c = $(document).scrollTop();//滚动条距离网页顶部的高度
 var wh = $(window).height(); //页面可视化区域高度
 if (Math.ceil(wh+c)>=h){
  alert("我已经到底部啦");
 }
 })

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

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

rreee

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

 $(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("我已经到底部啦");
 }
 })

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

위 내용은 jQuery는 웹 페이지 하단으로 탐색할지 여부를 결정합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!