ホームページ > 記事 > ウェブフロントエンド > Webページがブラウザの下までスクロールしたかどうかを判定するjQueryの詳細解説

Webページがブラウザの下までスクロールしたかどうかを判定するjQueryの詳細解説

小云云オリジナル: 2018-01-20 10:44:191410ブラウズ

一部の要件では、ユーザーがブラウザの一番下までスクロールしたときに新しいコンテンツを読み込む必要があります。著者はここで、Jquery を使用してユーザーが Web ページの下部まで閲覧したかどうかを判断する方法を紹介します。皆さんのお役に立てれば幸いです。

以下の知識ポイントを理解する前に、著者はここでいくつかの概念を紹介します。

$(window).height(); //ブラウザの表示領域の高さを取得するために使用されます

$(window).width(); //ブラウザの表示領域の幅を取得するために使用されます

$( document.body).height(); //ページの高さを取得します document

$(document.body).width(); //ページの幅を取得します

$(document).scrollTop() ; //垂直スクロールを取得しますバーから上部までの垂直距離を取得します

$(document).scrollLeft(); //水平スクロールバーから左までの水平距離を取得します

ブラウザの表示領域の高さ + 垂直スクロールバーの距離上部の距離

この結論により、実装は簡単になります。次のコードは、ユーザーが Web ページの下部まで閲覧したかどうかを判断するために実装されています。

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

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

ユーザーが特定の要素を閲覧したかどうかを判断する必要がある場合は、上記の Web ページドキュメントの高さを、特定の要素と Web ページの上部の間の距離に変更するだけです。例:

 $(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);

Webページがブラウザの下までスクロールしたかどうかを判定するjQueryの詳細解説

関連記事