Question

我在页面上加载数据并使用无限滚动在用户滚动时加载更多数据（页面加载时默认为20项。但是根据屏幕分辨率，如1080加载页面，垂直滚动条不可见或活动用户滚动。我添加了一个按钮，供用户点击加载更多，当他们滚动时，加载按钮将隐藏。

页面加载时

问题：如果垂直滚动处于活动状态或可见，我如何从开始隐藏按钮，而不是第一次滚动以隐藏它。另外，如果垂直条处于活动状态，我如何保持加载按钮可见。

DIV /键：

<div id="loadUsers" class="btn" data-bind="click: Next" style="position:fixed; width:auto; height:20px; padding:5px; bottom:10px; ">
    Load more users...
</div>

淘汰赛下一个方法

Next = function () {
        var _page = $.views.Roster.ViewModel.CurrentPage() + 1;
        $.views.Roster.ViewModel.CurrentPage(_page);
        $.views.Roster.GetPage(_page);
    };

启用滚动后隐藏加载按钮

 $(document).ready(function () {
        $('#main').scroll(function () {
            $('#loadUsers').hide()
            var div = $(this);
            if (div[0].scrollHeight - div.scrollTop() == div.height()) {
               Next();
            }
        });
    });

Answer 1

可见绑定： -

<div id="loadUsers" class="btn" data-bind="click: Next, visible: displayBtn()" style="display:none; ">
Load more users...
</div>

脚本： -

self.displayBtn= function(){
  return ($(document).height() < window.innerHeight);
 }

Answer 2

使用此功能，您可以知道垂直滚动条是否处于活动状态：

var isVBActive = function(){
    return ($(document).height() > window.innerHeight);
}

使用resize event可隐藏或显示按钮：

$(window).resize(function() {
    if(isVBActive())
        $('#button').hide();
    else
        $('#button').show();
});

我希望它有所帮助。

启用按钮以在点击时加载数据，直到启用滚动条

2 个答案: