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

作为前端工程师，在编写代码的时候，有的时候我们会遇到这样一个问题，就是需要在网页上一块固定的大小区域上放置侥馑孰幻超过容量的内容。此时如果用浏览器自带的滚动条浏览溢出的内容，界面会显得很丑，就如下图。网页上有许多用css改变滚动条样式的代码，不只是否浏览器问题，我电脑看着没有任何变化。今天我就为大家介绍几款相关插件实现的精美滚动条。【请事先引入好jQuery文件】

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

第二种样式

1、此种滚动条一直显示，是通过背景图片显示，制作者仍可根据需要调整背景图片颜色形状等。用法：将原生的JS脚本添加到需要页面即可

2、这是我个人翻译出来的使用说明，供大家参考。目前这种滚动条的鼠标滑轮滚动控制在各大浏览器显示不同，但无伤大雅。

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