Question

假设我有div并且我想获取数据并将数据推送到该div中。当用户在div中滚动时，将获取下一组数据并将其推送到div中。如何使用jQuery检测滚动条位置？我不想使用任何插件。我需要jQuery代码。这是一个示例链接，如ahttp：//www.stevefenton.co.uk/cmsfiles/assets/File/infinitescroller.html但它使用了一个插件。

Answer 1

如何处理以下内容：

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

Answer 2

此代码已经过测试和验证。滚动div时，代码会通过将滚动条高度与滚动条位置进行比较来检查滚动条是否到达底部。如果是这样，它会调用一个获取更多内容的方法并将其附加到div。

享受！

Koby

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

Answer 3

我认为.scrollTop()是您的首选武器。 jQuery API

获取第一个滚动条的当前垂直位置匹配元素集合中的元素。

因此请确保将其绑定到正确的元素。直接在div上我应该工作。

垂直滚动位置与像素数相同隐藏在可滚动区域上方的视图中。如果滚动条是在最顶部，或者如果元素不可滚动，则此数字将为是0。

所以你可能要找到一种方法来计算div的高度，好像它会在没有滚动条的情况下被拉伸，以便将这些数字放入与加载事件的拍摄有意义的关系中。

Answer 4

为了实现该行为，您不需要 jquery 或 jquery 插件，您只需使用 Vanilla Javascript 和 IntersectionObserver API 即可完成所有操作。

您需要做的就是放置元素并在它们出现在屏幕上时进行监听。

你可以用几行 javascript 和 html 代码来完成，它比在浏览器中监听滚动事件的性能要高得多

我最近整理了一篇关于无限滚动和这种特定行为的文章here

我希望它能为您提供满足您特定需求的指南

Jquery无限滚动 - 使用div而不是body的滚动条

4 个答案: