javascript - 如何在 Javascript/jQuery 中的 DIV 中实现无限/无限滚动

标签 javascript jquery html

<分区>

我意识到这里有几个问题可以解决无限滚动的问题。然而,他们中的大多数都在使用插件。

我想知道如何实现可与我现有的分页功能配合使用的无限滚动。目前我有一个“加载更多”按钮,点击后,将获取接下来的 10 个项目,并附加到列表中。我不想在单击“加载更多”按钮时执行此操作,而是希望它在滚动位置到达底部时发生。另外,这个列表不在主页上,它在一个 DIV 中。将页码存储在 ID 为“pageNum”的隐藏字段中。

$.ajax({
        type: "GET",
        url: "/GetItems",
        data: { 'pageNum': $('#pageNum').val() },
        dataType: "json",
        success: function (response) {
                $('#MyDiv ul').append(response.Html);
                $('#pageNum').val(response.PageNum);
            }
        }
});

#MyDiv
{
    border:solid 1px #ccc; 
    width:250px;
    height:500px;
    overflow-y: scroll;
}

<div id="MyDiv">
  <ul>
    <li>...</li>
    ...
  </ul>
</div>

最佳答案

最简单的方法,是检查您是否已到达底部,然后触发“加载更多”按钮上的点击事件。

$(window).on('scroll', function(){
    if( $(window).scrollTop() > $(document).height() - $(window).height() ) {
        $("#load-more").click();
    }
}).scroll();

上面的脚本只是一个例子,不要在你的生产环境中使用它。

更新

...更好的方法是调用函数而不是触发调用函数的事件。

更新2

...最好的方法是:让用户决定如果他这样做了要做什么(在这种情况下,他向下滚动到页面的末尾,而不是到达下一页);)

关于javascript - 如何在 Javascript/jQuery 中的 DIV 中实现无限/无限滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15181286/

相关文章:

jquery - 有没有办法在 safari(网络浏览器)上隐藏 iPad 键盘

javascript - AngularJS 指令绑定(bind)

javascript - 我需要一个通用的 javascript "wait for function to be available"

Javascript - 生成适合固定总和的舍入整数数组

javascript - 将鼠标悬停在圆圈中的不同部分上

ruby-on-rails - 如何使用已构建的 Rails html 模板

javascript - 根据选中的单选/复选框显示 div,多个实例

javascript - 如何从灯箱画廊内触发无限滚动 - Django/FancyBox/Waypoints.js

javascript - 如何使 Topbar 扩展与最新的 MediaWiki 兼容?

html - 为什么我应该使用 content_tag 而不是 "regular"html?