jQuery は Web ページの下部を参照するかどうかを決定します

今回は、ブラウザが Web ページの下部に到達したかどうかを判断するための jQuery について説明します。 ブラウザが Web ページの下部に到達したかどうかを判断するための jQuery の 注意事項 について、実際のケースを見てみましょう。見てください。

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

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

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

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

$(document.body).height(); //ページドキュメントの高さを取得します

$(document.body).width(); //ページドキュメントの幅を取得します

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

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

上記の知識ポイントを通じて、ブラウザの表示領域の高さ + 垂直スクロール バーから上部までの距離

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

りー

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

 $(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では問題ありませんでした。

次に、作成者は上記のコードをプラグインにカプセル化します。

りー

次に、読者が上記のプラグイン ファイルを導入した後、次のようなコードを通じてそれを呼び出すことができます。

 $(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 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

以上がjQuery は Web ページの下部を参照するかどうかを決定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。