Package Exports

scroll-behavior-polyfill

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (scroll-behavior-polyfill) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

`scroll-behavior` polyfill

A polyfill for the new CSS property: scroll-behavior.

Installation

You can npm install it like this:

npm install scroll-behavior-polyfill

Adding the polyfill

Importing it

The polyfill will be feature detected and applied if and only if the browser doesn't support the property already. To include it, add this somewhere:

import "scroll-behavior-polyfill"

Conditionally importing it

Preferably, you should feature detect before including the code since there is no need to include a polyfill that won't ever be applied.

One way to do so is with async imports:

if (!"scrollBehavior" in document.documentElement.style) {
    await import("scroll-behavior-polyfill");
}

Usage

You can use scroll-behavior exactly how you expect to:

As a CSS-property

#something {
    scroll-behavior: smooth
}

As an inline-style

<div style="scroll-behavior: smooth"></div>

As an imperative style property

element.style.scrollBehavior = "smooth";

Dependencies

This polyfill expects requestAnimationFrame to be defined. Please polyfill it!

Caveats

You cannot set scrollLeft or scrollTop. There is no way to overwrite the property descriptors for those operations. Instead, use scroll(), scrollTo or scrollBy which does the exact same thing.
Element.scrollIntoView() is not polyfilled at the moment.
Elements inside ShadowRoots won't be detected at the moment. It probably will be soon.