elastic-scroll-polyfill
Advanced tools
On macOS and iOS, there is a nice effect when hitting the edge of a document called elastic or rubber band scrolling. This is distinct from momentum or inertial scrolling, and was first demoed at the original iPhone event back in 2007.
Elastic scrolling: When hitting the edge of a scrolling boundary, the boundary will continue to scroll briefly as though it is being "stretched" before settling back down.
Momentum scrolling: When letting go of the input device (touch or trackpad), the document will continue to scroll while slowing down before coming to rest, as though it has inertia.
Chrome and Firefox on macOS don't have elastic scrolling on scrollable divs currently. Chrome only has it on the <body> element, while Firefox doesn't have it at all.
This library is essentially a polyfill for the effect for Chrome and Firefox on macOS, while handling iOS automatically as well. This is particularly useful for chat web applications, where the lack of elastic scrolling when the user hits the bottom of the scrolling window feels abrupt and inorganic, unlike native apps.
The effect is automatically disabled for non-Apple devices and uses the native implementation if possible (Safari on macOS and iOS have the effect built-in).
It uses an inner wrapper and transitions the translate3d property, using the event.deltaY / event.deltaX values to determine the translation intensity in order to replicate the effect.
https://codepen.io/anon/pen/bQVpdv
Note: the effect is disabled on non-Apple devices by default. Pass { appleDevicesOnly: false } as an argument to the function to disable this behavior.
# npm
npm i elastic-scroll-polyfill
# Yarn
yarn add elastic-scroll-polyfill
CDN: https://unpkg.com/elastic-scroll-polyfill
<div class="overflow" data-elastic>
Scrollable content in here
</div>
elasticScroll()
Calling elasticScroll() without arguments will apply the elastic scroll effect to all elements on the document with a data-elastic attribute by default.
target optionYou can also pass a custom CSS selector string, HTMLElement or NodeList:
const element = document.querySelector('#scrollableElement')
const instance = elasticScroll({ targets: element }) // Instance
// Methods to disable/enable the effect
instance.disable()
instance.enable()
const multipleElements = document.querySelectorAll('.scrollableElements')
const instances = elasticScroll({ targets: multipleElements }) // Instance[]
Elastified elements have an _elasticScroll property pointing to the instance.
{
targets: '[data-elastic]', // CSS Selector, HTMLElement, NodeList
easing: 'cubic-bezier(.23,1,.32,1)', // CSS transition timing function (ease-out-quint)
duration: [90, 750], // [BounceAway, BounceBack] in ms
intensity: 0.8, // intensity of the effect (how much it translates the content)
useNative: true, // use the native implementation if possible, `-webkit-overflow-scrolling` on iOS
appleDevicesOnly: true // only apply to Apple devices
}
Example:
elasticScroll({
intensity: 2,
useNative: false,
})
The native implementation offers the ability to "stretch" the overflow when already at the edge of the scrolling boundary. As far as I'm aware there is no way to replicate this unfortunately.
Browsers that support the wheel event and unprefixed CSS transitions.
In order to prevent reconciliation problems created by the inner wrapper, you'll need to add the inner elastic wrapper div yourself, ensuring it has a data-elastic-wrapper attribute.
Here's a component example:
import React, { cloneElement, useEffect, useRef } from 'react'
import elasticScroll from 'elastic-scroll-polyfill'
function ElasticScroll({ children, ...props }) {
const ref = useRef()
useEffect(() => {
const instance = elasticScroll({
targets: ref.current,
...props,
})
return () => {
instance.disable()
}
}, [])
return cloneElement(children, {
children: <div data-elastic-wrapper>{children.props.children}</div>,
ref: node => {
ref.current = node
const { ref } = children
if (ref) {
if (typeof ref === 'function') {
ref(node)
} else if (ref.hasOwnProperty('current')) {
ref.current = node
}
}
},
})
}
// Usage: wrap the parent scroller with the component
const App = () => (
<ElasticScroll>
<div style={{ width: '300px', height: '300px', overflowY: 'scroll' }}>
Scrollable content in here
</div>
</ElasticScroll>
)
FAQs
macOS/iOS elastic scroll polyfill on scrollable elements
The npm package elastic-scroll-polyfill receives a total of 246 weekly downloads. As such, elastic-scroll-polyfill popularity was classified as not popular.
We found that elastic-scroll-polyfill demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.