启用按钮，在启用滚动条之前单击加载数据

enable button to load data on click until scroll bar is enabled

本文关键字：启用 单击 加载 数据 滚动条 按钮      更新时间：2023-09-26

我在页面上加载数据，并使用无限滚动来加载更多的数据，因为用户滚动(默认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>

knockout 

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

visible binding:-

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

使用这个函数，您可以知道垂直滚动条是否处于活动状态:

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

和resize事件可以隐藏或显示按钮:

$(window).resize(function() {
    if(isVBActive())
        $('#button').hide();
    else
        $('#button').show();
});
相关文章：