JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 77381
  • Score
    100M100P100Q167836F
  • License MIT

Smooth Scroll behavior polyfill

Package Exports

  • seamless-scroll-polyfill
  • seamless-scroll-polyfill/dist/esm/Element.scrollBy

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 (seamless-scroll-polyfill) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Build Status

This repo is forked from iamdustan/smoothscroll and rewritten with TypeScript.

Installation and use

# npm
npm install seamless-scroll-polyfill --save

# yarn
yarn add seamless-scroll-polyfill

Use polyfill to patch all methods

import { polyfill } from "seamless-scroll-polyfill";

polyfill();

Use specific polyfill

import { elementScrollIntoViewPolyfill } from "seamless-scroll-polyfill";

elementScrollIntoViewPolyfill();

Use methods directly without patching

import { elementScrollIntoView } from "seamless-scroll-polyfill";

elementScrollIntoView(document.querySelector("#target"), { behavior: "smooth", block: "center", inline: "center" });

Import via script

<script src="https://cdn.jsdelivr.net/npm/seamless-scroll-polyfill@1.0.0/dist/es5/seamless.js"></script>
<script>
    // patch all methods
    seamless.polyfill();
    // or use specific methods
    seamless.windowScrollBy({ behavior: "smooth", top: 200, left: 0 });

    seamless.elementScrollIntoView(document.querySelector("#target"), {
        behavior: "smooth",
        block: "center",
        inline: "center",
    });
</script>

Auto polyfill via script

<script
    src="https://cdn.jsdelivr.net/npm/seamless-scroll-polyfill@1.0.0/dist/es5/seamless.auto-polyfill.min.js"
    data-seamless
></script>

Generated files structure

dir dist/esm dist/umd dist/es6 dist/cjs dist/es5
module format ES Modules UMD UMD CJS UMD
ES version ESNext ESNext ES2015 ES2015 ES5

Thanks