seamless-scroll
js无缝滚动插件
兼容性
- ie7+
- 不支持移动端手势。
使用
const seamless = require('seamscroll')
`or`
import seamless from 'seamscroll'
seamless.init({
dom: document.getElementById('demo1')
})
//script tag
<script src="seamscroll.min.js"></script>
<script>
seamless.init({
dom: document.getElementById('demo1')
})
</script>
Demo
.demo2 {
width: 600px;
height: 100px;
position: relative;
overflow: hidden;
margin-top: 100px;
}
.list2 li {
float: left;
width: 100px;
height: 100px;
margin-right: 20px;
text-align: center;
font-size: 20px;
color: #fff;
line-height:100px;
background-color: #ccc;
}
<div class="demo2">
<ul class="list2 clearfix" id="demo2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<script src="seamscroll.min.js"></script>
seamscroll.init({
dom: document.getElementById('demo2'),
direction: 2
})
配置参数
*必填参数(dom)
key | description | default | val |
---|---|---|---|
*dom | 作用的dom | null | dom |
step | 步长,越大越快 | 1 | Number |
hoverStop | 是否启用鼠标hover控制 | true | Boolean |
direction | 方向 0 往下 1 往上 2向左 3向右 | 1 | Number |
singleHeight | 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 | 0 | Number |
singleWidth | 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 | 0 | Number |
waitTime | 单步停止等待时间(default 1s) | 1000 | Number |
TKS
seamless-scroll发现bug或者有什么不足望指点,感觉不错点个star吧。
License
seamless-scroll is open source and released under the MIT License.