Trước tiên phải có thư viện jQuery , jQuery-UI và SlimScroll. Sau đó thêm đoạn mã:

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>

<script type="text/javascript" src="slimScroll.min.js"></script>

<script type="text/javascript" src="jquery-ui.js"></script>

Đoạn văn bản muốn hiển thị:

<div id="test"><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.</p></div>

Sau đó bạn cần thêm đoạn mã javascript gọi slimScroll lên làm việc:

<script type="text/javascript">
$(function(){$('#test').slimScroll({height: '250px',});});
</script>

Các tùy chọn trong jQuery SlimSrcoll

• width: Chiều rộng của khung hiển thị ( Đơn vị: px )
• height: Chiều cao của khung hiển thị ( Đơn vị: px )
• size: Kích thước của thanh kéo ( Đơn vị: px - mặc định là 7px ).
• position: Vị trí hiển thị của thanh kéo ( Đơn vị : left hoặc right - mặc định là right )
• color: Màu sắc của thanh kéo ( Đơn vị : #mã_màu - mặc định là #000 )
• alwaysVisible: Ẩn hiện thanh kéo ( Đơn vị false hoặc true - mặc định là false )

Bạn có thể xem thêm các tùy chọn khác tại đây.

Bài viết dựa theo jQuey SlimeScroll.