平滑滚动条是用于创建与滚动内容平滑滚动效果的可定制的,高性能的滚动条一个JavaScript库。
如何使用它:
加载HTML页面所需的“smooth-scrollbar.css”和”smooth-scrollbar.css“。
<pre><link href="dist/smooth-scrollbar.css" rel="stylesheet">
<script src="dist/smooth-scrollbar.js"></script></pre>
创建一个滚动区域如下:
<pre><section scrollbar>
Scrollable content goes here
</section>
<!– Or –>
<section data-scrollbar>
Scrollable content goes here
</section>
<!– Or –>
<scrollbar>
Scrollable content goes here
</scrollbar></pre>
使当内含量比其父容器大它滚动。
<pre>section {
width: 500px;
height: 300px;
overflow: auto;
}</pre>
追加自定义滚动条滚动的区域。
Scrollbar.initAll();
可能的选项。
<pre>Scrollbar.initAll({
// Scrolling speed
speed: 1,
// Scrolling friction from 0 to 100
friction: 10,
// Minimal size for scrollbar thumb.
thumbMinSize: 20,
// Render scrolling by integer pixels
renderByPixels: true,
// Whether allow upper scrollable content to continue scrolling when current scrollbar reaches edge.
// When set to 'auto', it will be enabled on nested scrollbars, and disabled on first-class scrollbars.
continuousScrolling: 'auto'
});</pre>
API。
<pre>// Init scrollbar on given element, and returns scrollbar instance
Scrollbar.init( element, [options] )
// Automatically init scrollbar on all elements refer to selector scrollbar, [scrollbar], [data-scrollbar], returns an array of scrollbars collection:
Scrollbar.initAll( [options] )
// Check if scrollbar exists on given element:
Scrollbar.has( element )
// Get scrollbar on the given element, if no scrollbar instance exsits, return undefined:
Scrollbar.get( element )
// Return an array that contains all scrollbar instances:
Scrollbar.getAll()
// Remove scrollbar on the given element, same as scrollbar#destroy() method.
Scrollbar.destroy( element )
// Remove all scrollbar instances.
Scrollbar.destroyAll()</pre>