elasticscroll.js
v0.0.3
Published
Use macOS native elastic scrolling on a scrollable element
Downloads
4
Readme
elasticScroll
Browsers like Chrome and Firefox on macOS don't have elastic scrolling on scrollable divs currently. The goal of this library is to replicate macOS native elastic scrolling when hitting the top and bottom of a scrollable element.
It uses an inner wrapper and transitions the translate3d
property, using the event.deltaY
value to specify the translation intensity in order to replicate the effect.
Installation
npm install elasticscroll.js
CDN: https://unpkg.com/elasticscroll.js
Usage
<div class="overflow" data-elastic> ... </div>
<script>elasticScroll()</script>
This will "elastify" every element with a data-elastic
attribute. Apply it to elements that overflow in the y direction.
Elastified elements have an _elasticScroll
property.
const div = document.querySelector('#someScrollableDiv')
elasticScroll(div)
div._elasticScroll.disable() // disable the effect
Defaults
const defaults = {
targets: '[data-elastic]', // String, Element, NodeList
easing: 'cubic-bezier(.14,.38,.25,1)', // CSS transition timing function
duration: [100, 800], // [BounceAway, BounceBack] in ms
multiplier: 1, // intensity
useNative: true, // use the native implementation if possible, `-webkit-overflow-scrolling` on iOS
appleDevicesOnly: true // only apply to Apple devices
}
By default, only Apple devices will use elastic scrolling, and the native implementation if possible.
Example:
elasticScroll({
targets: document.querySelectorAll('.scrollable-elements'),
useNative: false
})
Demo
https://codepen.io/anon/pen/LebYvR
Browser support
Browsers that support the wheel
event and unprefixed CSS transitions.