启用按钮以在单击时加载数据，直到启用滚动条-Java 学习之路

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

如果垂直滚动处于活动状态或可见，则页面加载 Problem: 如何从开始隐藏按钮，而不必在第一次滚动时隐藏按钮 . 另外，如果垂直条处于活动状态，我如何保持加载按钮可见 .

div/button:

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

knockout Next method

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

hide load button once scrolling is enabled

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

2 回答

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

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

并且resize event可以隐藏或显示按钮：

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

我希望它有所帮助 .

回复于 2024-05-04T20:03:10+08:00

可见绑定： -

<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);
 }

回复于 2024-05-04T20:03:10+08:00

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

2 回答

相关问题