Skip to content

chenxuan0000/seamless-scroll

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

seamless-scroll

js seamless-scroll plugin

Build Status LICENSE MIT

🌾 sample demo | 📘 中文文档

Browser support

IE
IE
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS Safari
iOS
Chrome for Android
Android
IE7+
  • mobile gestures are not supported.

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)

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

Changelog

See the GitHub release history.

License

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