jQuery库 之 jquery slimscroll插件使用

(官网简介) 
What is slimScroll? 
slimScroll is a small (4.6KB) jQuery plugin that transforms any div into a scrollable area with a nice scrollbar.slimScroll doesn’t occupy any visual space as it only appears on a user initiated mouse-over. User can drag the scrollbar or use mouse-wheel to change the scroll value.

(译) 
slimscroll是什么？ 
slimscroll是一个4.6kb的jQuery插件，把任何div元素包裹的内容区加上具有好的滚动条。slimscroll不占用任何视觉空间，它只出现在一个用户启动的鼠标。用户可以拖动滚动条或使用鼠标滚轮改变滚动值。

插件下载地址：https://github.com/rochal/jQuery-slimScroll/releases 
稳定、快速、免费的开源项目 CDN 服务：http://www.bootcdn.cn/jQuery-slimScroll/（点击查看最新插件CDN地址）

使用方法： 
1.引入jQuery插件（此处使用谷歌CDN服务，1.9.0版本）：

1 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

2.引入本插件：

<script type="text/javascript" src="yourJsPath/jquery.slimscroll.min.js"></script>
或者使用CDN服务（1.3.6版本）：
<script src="//cdn.bootcss.com/jQuery-slimScroll/1.3.6/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插件的使用

附上效果图(PS:右边的滚动条可以看出内容区是支持滚动的)

 

转载于:https://www.cnblogs.com/wiz-Chen/p/4748796.html