(官網簡介)
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:右邊的滾動條可以看出內容區是支持滾動的)
