Home

Awesome

seamless-scroll

js seamless-scroll plugin

Build Status LICENSE MIT

<p align="center"> <img src="./test/timg.jpg" width="440"/> </p> <p align="center"> 🌾 <a href="https://chenxuan0000.github.io/seamless-scroll/">sample demo</a> | πŸ“˜ <a href="./document/README.md">δΈ­ζ–‡ζ–‡ζ‘£</a> </p>

Browser support

<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/edge.png" alt="IE" width="16px" height="16px" /></br>IE<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/firefox.png" alt="Firefox" width="16px" height="16px" /></br>Firefox<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/chrome.png" alt="Chrome" width="16px" height="16px" /></br>Chrome<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/safari.png" alt="Safari" width="16px" height="16px" /></br>Safari<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/safari-ios.png" alt="iOS Safari" width="16px" height="16px" /></br>iOS<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/chrome-android.png" alt="Chrome for Android" width="16px" height="16px" /></br>Android
IE7+βœ“βœ“βœ“βœ“βœ“

Installation

NPM

npm install seamscroll --save

CDN

https://cdn.jsdelivr.net/npm/seamscroll@0.0.11/build/seamscroll.min.js

Usage

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
})

Configure

*Required parameters(dom)

keydescriptiondefaultval
*domthe role of the elementnulldom
stepstep,the faster the rolling speed is faster1Number
hoverStopmouse hover control is enabledtrueBoolean
direction0 down 1 up 2 left 3 right1Number
singleHeightone single stop height(default zero is seamless) => direction 0/10Number
singleWidthone single stop width(default zero is seamless) => direction 2/30Number
waitTimeone single data stop wait time(1s)1000Number

Changelog

See the GitHub release history.

License

seamless-scroll is open source and released under the MIT License.