GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → magic-akari → seamless-scroll-polyfill

magic-akari / seamless-scroll-polyfill

Licence: MIT license
Scroll Behavior polyfill

Labels

polyfillscrollsmoothscrollscrollintoview

Projects that are alternatives of or similar to seamless-scroll-polyfill

Stickyfill
Polyfill for CSS `position: sticky`
Stars: ✭ 2,252 (+1580.6%)
Mutual labels:  polyfill, scroll
Mos
一个用于在 macOS 上平滑你的鼠标滚动效果或单独设置滚动方向的小工具, 让你的滚轮爽如触控板 | A lightweight tool used to smooth scrolling and set scroll direction independently for your mouse on macOS
Stars: ✭ 7,772 (+5700%)
Mutual labels:  scroll, smoothscroll
vue-scroll-progress
🎉 Page scroll progress bar component for @vuejs
Stars: ✭ 96 (-28.36%)
Mutual labels:  scroll
react-native-audio-polyfill
Audio polyfill for desktop and native.
Stars: ✭ 13 (-90.3%)
Mutual labels:  polyfill
anim-event
Event Manager for Animation
Stars: ✭ 25 (-81.34%)
Mutual labels:  scroll
react-scroll-trigger
📜 React component that monitors scroll events to trigger callbacks when it enters, exits and progresses through the viewport. All callback include the progress and velocity of the scrolling, in the event you want to manipulate stuff based on those values.
Stars: ✭ 126 (-5.97%)
Mutual labels:  scroll
NoobScroll
A lightweight jQuery Plugin that add some cool function to make scrolling more fun [Archive]
Stars: ✭ 43 (-67.91%)
Mutual labels:  scroll
react-use-scroll-position
A react hook to use scroll position
Stars: ✭ 45 (-66.42%)
Mutual labels:  scroll
react-smart-scroll
Efficient rendering of long lists in React
Stars: ✭ 27 (-79.85%)
Mutual labels:  scroll
scrollbox
A lightweight jQuery custom scrollbar plugin, that triggers event when reached the defined point.
Stars: ✭ 15 (-88.81%)
Mutual labels:  scroll
core2
The bare essentials of std::io for use in no_std. Alloc support is optional.
Stars: ✭ 67 (-50%)
Mutual labels:  polyfill
onscroll-effect
A tiny JavaScript library to enable CSS animations when user scrolls.
Stars: ✭ 35 (-73.88%)
Mutual labels:  scroll
IsExternalInit
A source code only package which allows you to use C# 9's init and record features in older target frameworks like .NET Standard 2.0 or the "old" .NET Framework by providing a polyfill for the IsExternalInit class.
Stars: ✭ 75 (-44.03%)
Mutual labels:  polyfill
simple-scrollspy
Simple scrollspy without jQuery, no dependencies
Stars: ✭ 53 (-60.45%)
Mutual labels:  scroll
vue-scroll-snap
A super simple Vue component that allows fullscreen and horizontal scroll snapping.
Stars: ✭ 25 (-81.34%)
Mutual labels:  scroll
array-includes
Array.prototype.includes spec-compliant polyfill
Stars: ✭ 42 (-68.66%)
Mutual labels:  polyfill
vue-scrollwatch
scrollspy
Stars: ✭ 59 (-55.97%)
Mutual labels:  scroll
draggable-polyfill
🌈a beautify polyfill for native drag!
Stars: ✭ 49 (-63.43%)
Mutual labels:  polyfill
react-native-console-time-polyfill
console.time and console.timeEnd polyfill for react-native
Stars: ✭ 92 (-31.34%)
Mutual labels:  polyfill
react-scrolling-color-background
background with color transitioning as you scroll, declarative and easy to setup
Stars: ✭ 53 (-60.45%)
Mutual labels:  scroll
View All Similar Projects ➔

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 { scrollIntoView } from "seamless-scroll-polyfill";

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

Import via script

<!-- please replace the `latest` with specific version -->
<script src="https://cdn.jsdelivr.net/npm/seamless-scroll-polyfill@latest/lib/bundle.min.js"></script>
<script>
    // patch all methods
    seamless.polyfill();
    // or use specific methods
    seamless.scrollBy(window, { behavior: "smooth", top: 200, left: 0 });

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

Changelog

Detailed changes for each release are documented in CHANGELOG.md.

Thanks

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].