smoothscroll-polyfill
Advanced tools
The smoothscroll-polyfill package provides a polyfill for the smooth scrolling behavior in browsers that do not support it natively. This allows developers to ensure a consistent smooth scrolling experience across different browsers.
Polyfill Initialization
This code initializes the smoothscroll-polyfill, enabling smooth scrolling behavior in browsers that do not support it natively.
require('smoothscroll-polyfill').polyfill();Smooth Scrolling to an Element
This code demonstrates how to smoothly scroll to a specific element on the page using the scrollIntoView method with the 'smooth' behavior option.
document.querySelector('#targetElement').scrollIntoView({ behavior: 'smooth' });Smooth Scrolling to a Position
This code shows how to smoothly scroll to a specific position on the page using the window.scroll method with the 'smooth' behavior option.
window.scroll({ top: 1000, left: 0, behavior: 'smooth' });The seamless-scroll-polyfill package provides a similar polyfill for smooth scrolling behavior. It aims to offer a seamless experience for smooth scrolling across different browsers, much like smoothscroll-polyfill.
The scroll-behavior-polyfill package also provides a polyfill for the CSSOM View Module's scroll-behavior property, enabling smooth scrolling in browsers that do not support it natively. It is another alternative to smoothscroll-polyfill.
The Scroll Behavior specification has been introduced as an extension of the Window interface to allow for the developer to opt in to native smooth scrolling. To date this has only been implemented in Chrome, Firefox and Opera.
Check out all the methods covered here: https://iamdustan.github.io/smoothscroll
Download the production ready file here and include it in your project, or install it as a package.
# npm
npm install smoothscroll-polyfill --save
# yarn
yarn add smoothscroll-polyfill
When including the polyfill in a script tag, it will run immediately after loaded.
If you are importing it as a dependency, make sure to call the polyfill method:
import smoothscroll from 'smoothscroll-polyfill';
// kick off the polyfill!
smoothscroll.polyfill();
In both cases, the script will detect if the spec is natively supported and take action only when necessary.
The code requires requestAnimationFrame polyfill for browsers which don't support it.
If you prefer to always override the native scrolling methods, place this global variable before requiring the module or including the polyfill file.
window.__forceSmoothScrollPolyfill__ = true;
We strongly recommend not to do this unless your project strongly needs it.
The requirements to contribute are yarn and the latest LTS Node.js version.
First, fork the repository and do yarn install in the root folder to get all the dependencies to work with. Create a feature branch, write your stuff and run yarn test to check code style and prevent bugs.
In this project we use Prettier to format the final published code, you can run yarn format before committing. If you don't, a precommit hook will prevent you from pushing code that hasn't been formatted properly.
Are you done? Awesome, submit a pull request explaining your changes.
This is a polyfill, not library, so make sure the behavior you are introducing is in the spec.
On tests files we are using ES2015, but the polyfill is written in ES5 for browser compatibility.
If you want to watch tests as you write your code run yarn test --watch.
Successfully working in:
FAQs
Smooth Scroll behavior polyfill
The npm package smoothscroll-polyfill receives a total of 458,538 weekly downloads. As such, smoothscroll-polyfill popularity was classified as popular.
We found that smoothscroll-polyfill demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers 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.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.