沐风の秘密基地
青春とは、七つの自分に会えること。
沐风の秘密基地

Nicescroll jQuery - 一个很棒的页面滚动JQ插件

如何使用

Nicescroll的设计易于在您的网站上实施。
首先要引入Jquery.js
然后引入该js插件,即可使用

<script src="https://cdn.bootcdn.net/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.iframehelper.min.js"></script>

您可以在主页或每个可滚动的div处添加nicescroll,它可以起到神奇的作用,但是在某些情况下,需要对代码进行相同的更改。

当您想要自定义页面滚动条并为您的网站增添现代气息时,请在页面末尾(关闭body标签之前)或“ready”事件中添加此代码。

$("body").niceScroll();

最好在主体元素中添加nicescroll,对于旧的浏览器或必须添加到html元素的罕见页面布局。

更改光标的颜色和宽度很简单:

$("body").niceScroll({
    cursorcolor:"aquamarine",
    cursorwidth:"16px"
});

当由于使用动态布局而导致div大小或位置不断变化时,最好使用包装的div。

在正常情况下,您可以将nicescroll添加到可滚动的div中。 Nicescroll将自定义滚动条添加为页面(或主绝对容器)的绝对元素,实际DOM非常限于检测元素大小调整和重新定位,因此可能出现滚动条位置不匹配的情况。 您可以使用包装器div解决此问题,然后滚动条在内容div上具有绝对位置。

要创建包装的div,必须将内容div添加到主可滚动div中,例如:

<div class="nicescroll-box">
    <div class="wrap">
    [your scrollable content]
    </div>
</div>

将nicescroll添加到包装的div需要一个附加参数来指定包装的div。

$(".nicescroll-box").niceScroll(".wrap",{cursorcolor:"aquamarine"});

在某些情况下,当您从其他库(例如jquery UI,无限滚动等)中按大小调整/隐藏/显示内容添加nicescroll时,需要在内容更改或div修改/隐藏/显示时通知nicescroll。

这很简单:

$("<your div>").getNiceScroll().resize();

手动调用或绑定到库事件以通知更改。

赞赏
# # # #
首页      学习日记      Nicescroll jQuery - 一个很棒的页面滚动JQ插件

Mufeng

文章作者

发表评论

textsms
account_circle
email

沐风の秘密基地

Nicescroll jQuery - 一个很棒的页面滚动JQ插件
如何使用 Nicescroll的设计易于在您的网站上实施。 首先要引入Jquery.js 然后引入该js插件,即可使用 <script src="https://cdn.bootcdn.net/ajax/libs/jquery.nicescroll/3.7.6/jqu…
扫描二维码继续阅读
2021-01-22