网站制作中用到的平滑滚动,自定义

平滑滚动条是用于创建与滚动内容平滑滚动效果的可定制的,高性能的滚动条一个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>
上一个:房产网站建设都有哪些的功能程序和作用
下一个:暂无
茌平网站建设,茌平做网站,茌平网站设计