js無縫滾動

seamless-scroll

js無縫滾動插件

? 簡單demo
? English Document

兼容性

• 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.