美化滚动条插件：jquery slimscroll

前言

项目中，由于子元素过宽或者过长，父元素使用overflow:aoto样式，也就是在这种情况下，自动生成滚动条，而这种滚动条默认使用的是浏览器自带的样式，丑陋无比，因此我们往往希望改变滚动条的样式。此文我们讲述jquery插件jquery slimscroll.js,专门美化滚动条的插件。
slimscroll是一个4.6kb的jQuery插件，把任何div元素包裹的内容区加上具有好的滚动条。slimscroll不占用任何视觉空间，它只出现在一个用户启动的鼠标。用户可以拖动滚动条或使用鼠标滚轮改变滚动值。
稳定、快速、免费的开源项目 CDN 服务：http://www.bootcdn.cn/jQuery-slimScroll/

使用方法

1、引入jquery（此插件依赖jquery，故需要先引入jquery）
2、引入slimscroll插件

<script src="https://cdn.bootcdn.net/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>

3、将要设置的内容外加div元素包裹（p标签内为我要设置的内容）

<div id="inner-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.

Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
</div>

4、载入slimscroll插件（记得一定在DOM树加载完才能为元素绑定插件）

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $("#inner-content").slimScroll({
            height: '300px'
        });
    });
</script>

slimscroll.png