scrolljs
v0.1.0
Published
用Transform来模拟原生的滚动，并提供丰富的API和插件
Downloads
11
Readme
#lib.scroll
最新版本
2.7.2
依赖库
完整引用举例：
<script src="http://g.tbcdn.cn/mtb/lib-scroll/{{version}}/??combo.js,scroll.js"></script>用Grunt打包
运行 npm install，来安装所需的依赖模块。关于NPM的知识，请参见nodejs;
运行 grunt，来对项目进行打包。关于Grunt的知识，请参见gruntjs;
初始化
var Scroll = lib.scroll;
var scroller = new Scroll(options);
scroller.init();参数
scrollWrap
滚动元素的父级，如果设置这个属性，那么scrollElement会自动设置为其第一个子元素
scrollElement
滚动的元素，在同时设置scrollElement和scrollWrap时，以scrollElement为准。
direction
方向x（水平方向）/y（垂直方向），可省略，默认为y。
padding
可以设置内边距，传递一个对象给这个属性，对象的key分别为top/bottom/left/right，可省略，默认都为0。
noBounce
是否取消边缘回弹效果，可省略，默认为false
isPrevent
阻止默认滑动，可省略，默认为true
inertia
惯性的类型，取值为normal/slow/veryslow，可省略，默认为normal
isFixScrollendClick
点停滚动时，触发点击事件的问题，可省略，默认为true
useFrameAnimation
用帧动画实现滚动
图示
代码示例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<style>
html,body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#scroll-wrap {
width:100%;
height:100%;
overflow:hidden;
background-color:#CCC;
}
#scroll-content {
width:100%;
background: -webkit-linear-gradient(top, red, orange, yellow, green, cyan, blue, purple);
}
#scroll-content > div {
height: 2000px;
}
</style>
</head>
<body>
<div id="scroll-wrap">
<div id="scroll-content">
<div></div>
</div>
</div>
<script src="http://g.tbcdn.cn/mtb/lib-scroll/{{version}}/??combo.js,scroll.js"></script>
<script>
var scroll = lib.scroll({
scrollWrap: document.getElementById('scroll-wrap')
});
scroll.init();
</script>
</body>使用插件
注意：从2.6.0版本开始，lib.scroll不再提供插件机制，如需使用原来插件的功能可选择ctrl.scrollview
降级
用原生的滚动。并保留部分API的行为。
引入http://g.tbcdn.cn/mtb/lib-scroll/{{version}}/downgrade.js。并在初始化时增加downgrade参数。
<script src="http://g.tbcdn.cn/mtb/lib-scroll/{{version}}/??combo.js,scroll.js,downgrade.js"></script>
<script>
var scroll = lib.scroll({
downgrade: true,
scrollWrap: document.getElementById('scroll-wrap')
});
scroll.init();
</scriptAPI使用
请参见API.md