seamless-scroll-polyfill-shadowroot-fix
v0.0.1
Published
Smooth Scroll behavior polyfill with no check if element exists (this breaks for shadowRoots)
Downloads
3
Readme
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 { polyfill } from "seamless-scroll-polyfill/esm/Element.scrollIntoView.js";
polyfill();
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/[email protected]/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/[email protected]/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 |