smoothscroll-polyfill

What is smoothscroll-polyfill?

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.

What are smoothscroll-polyfill's main functionalities?

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

Other packages similar to smoothscroll-polyfill

seamless-scroll-polyfill

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.

scroll-behavior-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.

README

Smooth Scroll behavior 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 Firefox.

See it in action https://iamdustan.github.io/smoothscroll

Install

Download the distribution file from this repository and include it in your project.

You can also find it in npm as smoothscroll-polyfill or bower as smoothscroll.

require('smoothscroll-polyfill').polyfill();

Requires requestAnimationFrame polyfill for browsers which don't support it!

Contribute

Fork the repository and run npm install.

After any modification make sure it doesn't break in any of the supported browsers, check linting and build running npm run build and then open a pull request.

Browser Support

Successfully tested in:

• Safari 6+
• iOS Safari 6+
• Chrome (last version)
• natively supported in Firefox
• Internet Explorer 9+
• Microsoft Edge
• Opera Next

If you have tested this and worked as expected in a different browser let us know so we can add it to the list, if not open an issue providing browser, browser version and a good description about it.

Standards documentation

• http://dev.w3.org/csswg/cssom-view
• http://lists.w3.org/Archives/Public/www-style/2013Mar/0314.html