js seamless-scroll plugin
🌾 sample demo | 📘 中文文档
IE |
Firefox |
Chrome |
Safari |
iOS |
Android |
---|---|---|---|---|---|
IE7+ | ✓ | ✓ | ✓ | ✓ | ✓ |
- mobile gestures are not supported.
npm install seamscroll --save
https://cdn.jsdelivr.net/npm/seamscroll@0.0.11/build/seamscroll.min.js
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>
.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
})
*Required parameters(dom)
key | description | default | val |
---|---|---|---|
*dom |
the role of the element | null |
dom |
step |
step,the faster the rolling speed is faster | 1 |
Number |
hoverStop |
mouse hover control is enabled | true |
Boolean |
direction |
0 down 1 up 2 left 3 right | 1 |
Number |
singleHeight |
one single stop height(default zero is seamless) => direction 0/1 | 0 |
Number |
singleWidth |
one single stop width(default zero is seamless) => direction 2/3 | 0 |
Number |
waitTime |
one single data stop wait time(1s) | 1000 |
Number |
See the GitHub release history.
seamless-scroll is open source and released under the MIT License.