really-smooth-scroll
really-smooth-scroll copied to clipboard
chuson1996
A script that smoothen scrolling in the browser
really-smooth-scroll
This is it. I have been looking for libraries, shims and tricks for smooth scrolling for way too long on the Internet. And none actually provides the smoothness that I want. THIS ENDS NOW. (However, this shim only takes effect in desktop browsers, not yet supported for mobile browsers. But soon it will. )
This shim overrides browser's window.scrollTo function. Instead of jumping immediately, it smoothly scrolls to the scroll position (Check demo). If you want the use the old behavior, use window.oldScrollTo.
The magic algorithm is based on the spring animation in react-motion. Wanna see why it's awesome?
Install
npm install --save really-smooth-scroll
# or if you use yarn
yarn add really-smooth-scroll
Usage
const ReallySmoothScroll = require('really-smooth-scroll');
// or
// import ReallySmoothScroll from 'really-smooth-scroll';
ReallySmoothScroll.shim();
// Done. Coundn't be easier.
// If you want to adjust the scrolling sensitivity (Optional)
ReallySmoothScroll.config({
mousewheelSensitivity: 6, // Default
keydownSensitivity: 6 // Default (When you press arrow down/up key)
});
If you don't use webpack or babel, embed one of these 2 scripts to your html
<!-- Production -->
<script src="https://cdn.rawgit.com/chuson1996/really-smooth-scroll/ff3210e1/build/really-smooth-scroll.js"></script>
<!-- Development -->
<script src="https://rawgit.com/chuson1996/really-smooth-scroll/master/build/really-smooth-scroll.js"></script>
chuson1996