0

我正在页面上加载数据，并在用户滚动时使用无限滚动来加载更多数据（页面加载时默认 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();
            }
        });
    });
4

2 回答 2

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);
 }
于 2013-05-07T11:36:49.160 回答
0

With this function you can know if the vertical scrollbar is active :

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

And with the resize event can hide or show the button :

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

I hope it helps.

于 2013-05-07T11:28:13.123 回答