jquery滚动条插件nanoscroller的应用 本是古典 何须时尚 2022-02-04 04:37 267阅读 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
还没有评论,来说两句吧...