10

divがあり、データをフェッチしてそのdivにデータをプッシュしたいとします。ユーザーがdiv内をスクロールすると、次のデータセットがフェッチされてdivにプッシュされます。jQueryでスクロールバーの位置を検出するにはどうすればよいですか？プラグインは使いたくない。jQueryコードが必要です。これはahttp：//www.stevefenton.co.uk/cmsfiles/assets/File/infinitescroller.htmlのようなサンプルリンクですが、プラグインを使用していました。

4

4 に答える 4

43

次のようなものはどうですか。

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       var new_div = '<div class="new_block"></div>';
       $('.main_content').append(new_div.load('/path/to/script.php'));
   }
});

これにより、スクロールバーがページの下部に到達したときに、メインページコンテナに新しい要素が追加されます。また、この新しい要素を外部スクリプトからロードされたコンテンツで埋めます。

ユーザーが特定のdivを一番下までスクロールしたかどうかを検出する場合は、次のようにします。

$('.some_element').bind('scroll', function(){
   if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight){
      var new_div = '<div class="new_block"></div>';
      $('.main_content').append(new_div.load('/path/to/script.php'));
   }
});
于 2012-04-09T11:03:47.420 に答える
3

このコードは、機能することがテストおよび検証されています。divをスクロールすると、コードは、スクローラーの高さとスクローラーの位置を比較して、スクローラーが一番下に到達したかどうかを確認します。その場合、より多くのコンテンツを取得してdivに追加するメソッドを呼び出します。

楽しみ！

コビー

$(document).ready(function () {
        $("div").scroll(function () {
            var $this = $(this);
            var height = this.scrollHeight - $this.height(); // Get the height of the div
            var scroll = $this.scrollTop(); // Get the vertical scroll position

            var isScrolledToEnd = (scroll >= height);

            $(".scroll-pos").text(scroll);
            $(".scroll-height").text(height);

            if (isScrolledToEnd) {
                var additionalContent = GetMoreContent(); // Get the additional content

                $this.append(additionalContent); // Append the additional content

            }
        });
    });

あなたのコメントによると、これが機能しているHTMLページのソースコード全体です（IE 9でテスト済み）：

**jqueryライブラリを参照していることを確認してください**

        <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Image</title>
        <script src="assets/js/jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("div").scroll(function () {
                    var $this = $(this);
                    var height = this.scrollHeight - $this.height(); // Get the height of the div
                    var scroll = $this.scrollTop(); // Get the vertical scroll position

                    var isScrolledToEnd = (scroll >= height);

                    $(".scroll-pos").text(scroll);
                    $(".scroll-height").text(height);

                    if (isScrolledToEnd) {
                        var additionalContent = GetMoreContent(); // Get the additional content

                        $this.append(additionalContent); // Append the additional content

                    }
                });
            });

            function GetMoreContent() {
                return "<p>This is the div content</p><p>This is the div content</p><p>This is the div content</p><p>This is the div content</p><p>This is the div content</p>";
            }
        </script>
    </head>
        <body>
            <div style="overflow: scroll;height: 150px; border: 1px solid red;">
                <p>This is the div content</p>
                <p>This is the div content</p>
                <p>This is the div content</p>
                <p>This is the div content</p>
                <p>This is the div content</p>
                <p>This is the div content</p>
            </div> 

            Scroll Height: <span class="scroll-height"></span>   <br/>
            Scroll position: <span class="scroll-pos"></span>   
        </body>
    </html>
于 2012-04-09T11:25:06.950 に答える
0

私.scrollTop()はあなたの選択の武器だと思います。jQuery API

一致した要素のセットの最初の要素のスクロールバーの現在の垂直位置を取得します。

したがって、必ず正しい要素にバインドしてください。直接divで動作するはずです。

垂直スクロール位置は、スクロール可能領域の上のビューから非表示になっているピクセル数と同じです。スクロールバーが一番上にある場合、または要素がスクロールできない場合、この数値は0になります。

したがって、おそらく、スクロールバーなしで引き伸ばされるかのようにdivの高さを計算して、読み込みイベントのシュートと意味のある関係でこれらを数値に変換する方法を見つける必要があります。

于 2012-04-09T11:11:37.127 に答える
0

その動作を実現するために、jqueryやjqueryプラグインは必要ありません。とを使用するだけでVanilla Javascript、これらすべてを実行できますIntersectionObserver API。

あなたがする必要があるのは、要素を配置し、それらが画面で利用可能になったときに聞くことです。

数行のjavascriptとhtml行でそれを達成でき、ブラウザでスクロールイベントをリッスンするよりもはるかにパフォーマンスが高くなります

最近、無限スクロールとこの特定の動作に関する記事をここにまとめました

特定のニーズへのガイダンスとして役立つことを願っています

于 2020-12-25T09:59:59.237 に答える