jquery滚动条插件nanoscroller的应用

本是古典何须时尚 2022-02-04 04:37 303阅读 0赞

默认的滚动条的样式，各个版本的兼容性不是很好， 推荐一款[jQuery][] 插件nanoscroller ，可以自定义滚动条的样式。

应用：

1.引入样式 nanoscroller.css

<link rel="stylesheet" href="nanoscroller.css">

在页面中自定义滚动条的样式

![1181263-20170903201637390-1474720299.png][]

自定义的样式如下图所示：

![1181263-20170903201726874-2087513808.png][]

2.两个[js][]文件，一个[jQuery][]库，一个[jquery][jQuery].nanoscroller.js

<script src="jquery-3.2.1.min.js"></script>  
<script src="nanoScroller.js"></script>

页面中必须默认启动滚动js代码：

![1181263-20170903202132483-1554286564.png][]

控件内部默认的在某个节点下查询：如下图所示

![1181263-20170903202518077-1337847143.png][]

![1181263-20170903202617280-1536100137.png][]

![1181263-20170903202703968-846322923.png][]

3：html 必须有个大的div类名为nano 包裹 小的类名为nano-content的div

<div id="about" class="nano">
        <div class="nano-content"> ... content here ... (滚动条的内容部分) </div>
    </div>

[jQuery]: http://lib.csdn.net/base/jquery
[1181263-20170903201637390-1474720299.png]: /images/20220204/6e8800e7290f486bbc6eea06274bd28e.png
[1181263-20170903201726874-2087513808.png]: /images/20220204/16a57f81099d4c09a9445add9d37594d.png
[js]: http://lib.csdn.net/base/javascript
[1181263-20170903202132483-1554286564.png]: /images/20220204/96ea2a70e96f4644a6a17a2b920f9f26.png
[1181263-20170903202518077-1337847143.png]: /images/20220204/fd76c8703d9d42ac9bc4b070a94d0654.png
[1181263-20170903202617280-1536100137.png]: /images/20220204/c7d7591b7318446da1fe5cc38f668a55.png
[1181263-20170903202703968-846322923.png]: /images/20220204/09be766a720746a58be7b75970c7033e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，303人围观）

还没有评论，来说两句吧...

相关阅读

相关六、html+js网页滚动条插件

文章目录六、html+js网页滚动条插件 6.1 图片预览 6.2 index.html代码 6.3 mousescrol

骑猪看日落/ 2022年11月13日 11:26/ 0 赞/ 207 阅读

相关 jQuery自定义内容滚动条插件

使用方法：首先下载插件：[http://manos.malihu.gr/jquery-custom-content-scroller/][http_manos.mali

深藏阁楼爱情的钟/ 2022年08月18日 11:55/ 0 赞/ 430 阅读

相关 jQuery 插件autocomplete 应用

[jQuery 插件autocomplete 应用][jQuery _autocomplete] 　　项目中有时会用到自动补全查询，就像Google搜索框、淘宝商品搜索功

超、凢脫俗/ 2022年07月14日 09:15/ 0 赞/ 223 阅读

相关 Jquery无限滚动加载插件

$(document).endlessScroll({ fireOnce: false, fireDelay: false,

╰+哭是因爲堅強的太久メ/ 2022年06月17日 13:07/ 0 赞/ 408 阅读

相关 Jquery插件Nicescroll 制作滚动条

jquery.nicescroll.min.js滚动条使用方法,Nicescroll 是制作自定义滚动条的jq插件。支持div,iframe,html等使用,兼容IE7-8,s

╰+攻爆jí腚メ/ 2022年06月13日 10:47/ 0 赞/ 357 阅读

相关 jQuery插件之 Nicescroll滚动条

Nicescroll滚动条插件是一个非常强大的基于JQUERY的滚动条插件，不需要增加额外的css，几乎全浏览器兼容。ie6+，实现只需要一段代码，侵入性非常小，样式可完全自定

今天药忘吃喽~/ 2022年05月30日 02:50/ 0 赞/ 584 阅读

相关 jquery滚动条插件nanoscroller的应用

默认的滚动条的样式，各个版本的兼容性不是很好，推荐一款[jQuery][] 插件nanoscroller ，可以自定义滚动条的样式。应用： 1.引入样式 nanoscr

本是古典何须时尚/ 2022年02月04日 04:37/ 0 赞/ 304 阅读

相关 Jquery进度条插件 Progress Bar插件应用方法

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] Jquery进度条插件 Progress Bar插件应用

╰半夏微凉°/ 2022年01月16日 11:21/ 0 赞/ 726 阅读

相关 element ui 滚动条插件

<el-scrollbar></el-scrollbar> 用的时候加个高度就行了不喜欢用这个用下面这个在一个博客看到的还不错! 先张贴一张效果

墨蓝/ 2021年09月29日 19:48/ 0 赞/ 389 阅读

相关 liMarquee – jQuery无缝滚动插件

简介 `liMarquee` 是一款基于 `jQuery` 的无缝滚动插件，类似于 `HTML` 的 `marquee` 标签，但比 `marquee` 更强大。它可以应

女爷i/ 2021年06月26日 16:06/ 0 赞/ 1239 阅读