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

问题描述

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

我想知道如何实现可以与我现有的分页功能一起工作的无限滚动功能。目前我有一个加载更多按钮，点击后，将获取下10个项目，并追加到列表中。当点击加载更多按钮时，我不希望在滚动位置到达底部时发生这种情况。此外，此列表不在主页面上，它位于DIV内。将页码存储在id为'pageNum'的隐藏字段中。

  $。ajax（{
 type： GET，
 url：/ GetItems，
 data：{'pageNum'：$（'＃pageNum'）。val（）}，
 dataType：json，
成功：函数（响应）{
 $（'＃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（）; 
  

以上脚本只是一个示例，不要在生产环境中使用它。

更新

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

update2

.. 。最好的方法是：让用户决定如果他做什么该做什么（在这种情况下，他向下滚动到达页面的末尾，而不是到达下一页）;）

I realize there are several questions here that address the issue of endless scrolling. However most of them are using plugins.

I'd like to know how to implement endless scrolling that would work with my existing paging functionality. Currently I have a "load more" button, when clicked on, will fetch the next 10 items, and append to the list. Instead of doing this when the "load more" button is clicked, I'd like it to happen when the scroll position comes to the bottom. Also, this list is not on the main page, it's within a DIV. Storing the page number in a hidden field with 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>

解决方案

The simplest way, is to check if you've reached the bottom and to trigger then a click-event on your "load more"-button.

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

The script above is just an example, don't use it in your production environment.

update

...and the better way is to call the function instead of trigger an event which calls the function.

update2

...and the best way: let the user decide what is to do if he do (in this case he scrolls down to reach the end of your page, not to reach the next page) ;)

这篇关于如何在Javascript / jQuery的DIV中实现无限/无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！