10

假设我有 div，我想获取数据并将数据推送到该 div。当用户在 div 内滚动时，将获取下一组数据并将其推送到 div 中。如何使用 jQuery 检测滚动条位置？我不想使用任何插件。我需要 jQuery 代码。这是示例链接，例如 http://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 回答