gpt4 book ai didi

jquery - 跨浏览器jQuery滚动条与body标签一起操作

转载 作者:行者123 更新时间:2023-12-01 08:00:08 25 4
gpt4 key购买 nike

我想覆盖浏览器的 native 滚动条。有很多 jQuery 滚动条插件,我尝试了其中的大多数,例如 jScrollPanePerfectScrollbarTinyScrollbar 等。我尝试应用它们在正文标签上,如下所示:

    $('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

最佳答案

我在使用 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();

关于jquery - 跨浏览器jQuery滚动条与body标签一起操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20536459/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com