如何给自己的网页内容添加美观的滚动条

1、这种滚动条样式是鼠标经过显示，离开隐藏。制作者可以设置滚动条的宽度、颜色以及圆角值。

滚动条所用到的代码可以在这个页面下载，也可以预览。

首先，下载好之后，将JS文件放置相应的目录下，然后将js文件引入html

2、之后在脚本中添加如下代码，即可。

注意第一行宿羞销的$（）选秤良择器用来选择你需要添加滚动条的元素，下面可设置边框颜色宽度等值。

3、需要注意的是，该滚动条浏览器兼容，但有适合范围彩财，一般适用于直接出现在页面中的内容（没有定位过的切没有设置可见性）。如果设置了可见性，比如说点击弹出某个小窗口，而这个小窗口用到了滚动条的话，将他隐藏之后，鼠标再在窗口的位置左右晃动仍旧会出现滚动条。

如果你没有用到这种状况，用这款滚动条会是不错的选择。

1、此种滚动条一直显示，是通过背景图片显示，制作者仍可根据需要调整背景图片颜色形状等。

用法：将原生的JS脚本添加到需要页面即可

2、兼容已测，各浏览器兼容，但是有两点，第一，代码结构固定，这是编写者遗留的问题；第二，小型BUG（适用范围），不适合默认被隐藏（display：none）的元素，因为一旦隐藏，脚本将无法获取相关的元素。

解决办法：将display：none用visibility：hidden替换，若有需求可结合相应的定位避开对其他元素的影响。

1、此种滚动条目前使用效果比前几种要好，滚动起来有缓冲的效果。

但是需要添加相关的JS插件和CSS文件。

2、这是我个人翻译出来的使用说明，供大家参考。

目前这种滚动条的鼠标滑轮滚动控制在各大浏览器显示不同，但无伤大雅。

3、目前在我使用过的诸类滚动条中，效果比较好的应该是有这三种了。其他的要么绑定了代码结构（原生JS获取ID，一层套一层，使得你的网页结构要与之对应），要么不兼容。

希望这几款能够帮助大家。