Question

我想覆盖浏览器的原生滚动条。有很多jQuery滚动条插件，我尝试过大多数jQuery滚动条插件，例如jScrollPane，PerfectScrollbar，TinyScrollbar等。我尝试将它们应用于body标签，如下所示：

    $('html').css({"overflow":"hidden"}); //hide native scrollbars
    $('body').perfectScrollbar({wheelSpeed:10});
    //or
    //$('#scrollbar').perfectScrollbar({wheelSpeed:10});

它的工作方式不正确！所以，我有一个动态生成的内容div，它的高度大于窗口的大小，但是没有卷轴。在我看来它只适用于一些固定大小的div。即使我在div中包含一些动态内容，它也不起作用：

<body>
<div id='scrollbar'>
<div id=dynamicContent'>It is filled by jQuery ajax</div>
</div>
</body>

所以我的问题是如何修改任何jQuery滚动条插件以使用动态内容？我更喜欢使用TinyScrollbar，因为它的尺寸较小或PerfectScrollbar。

Answer 1

我对PerfectScrollbar也遇到了同样的问题，但是不使用自定义插件（在我的情况下它不起作用）我宁愿创建一个覆盖整个页面的div并将插件应用于DIV。此外，根据this，将自定义插件添加到正文中并不是一个好习惯。

首先，为身体添加风格。

body
{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

并在身体后面用div包装整个页面。

$("body").wrapInner( "<div class='bodyScroll' style='overflow:auto;height:100%;position:relative'></div>");
$(".bodyScroll").perfectScrollbar();

Answer 2

有一个名为Nicescroll的jQuery插件，有很多配置参数！看看niceScroll。我正在使用它与jQuery版本1.11.0，它的工作完美。

也可以设置主文档滚动条的样式。并为...工作 textareas和iframes，divs等。
适用于IE6 +，Chrome 2 +，Firefox 3 +，Opera 9.5+和Safari 4 +。
此外，它还支持其他移动设备。

以下是使用它的示例代码。

$(document).ready(function() {
  var nice = $("html").niceScroll();
});

Answer 3

如果是TinyScrollbar，你必须在可滚动元素上调用update（）函数，并且每次元素的内容都会改变。

var scrollbar = $("body");
$(scrollbar).update();

Answer 4

我将PerfectScrollbar改为使用body标签。您可以获得here的源代码。它在现实生活中如何运作，你可以在网站Nolesh.com上看到。如何使用它：

$('html').css({"overflow":"hidden"}); //hide native scrollbars
$('html, body').perfectScrollbar({wheelSpeed:50}); //apply PerfectScrollbar to body tag
//$('body').perfectScrollbar('update'); //to update

我希望它能节省别人的时间。

跨浏览器的jQuery滚动条与body标签一起使用

4 个答案: