Silky Smooth & Momentum Scrolling With mrD-SmoothScroller

Category: Animation , Javascript | June 11, 2024
Author:monsieurdd
Views Total:179 views
Official Page:Go to website
Last Update:June 11, 2024
License:MIT

Preview:

Silky Smooth & Momentum Scrolling With mrD-SmoothScroller

Description:

mrD-SmoothScroller is a tiny JavaScript library that replaces the native scroll events with a smooth scroll behavior. Supports mouse wheel, trackpad, and keyboard input.

Instead of jarring jumps between sections, this library allows your visitors to smoothly scroll between page elements when clicking anchor links or scrolling through the document. Its ease-in-out easing effect mimics real-world physics for a natural feel.

You can also customize the scrolling duration, sensitivity, and deceleration with customizable options passed via HTML data attributes.

How to use it:

1. Download and include the mrd-smoothscroller.js script in your document.

<script src="mrd-smoothscroller.js"></script>

2. Add the class="mrd-smooth" to the <body> tag and configure the smooth scrolling behavior with the following data-* attributes:

  • data-scroll-duration: Sets animation duration in milliseconds (default: 500)
  • data-scroll-deceleration: Controls scrolling slowdown (default: 0.93)
  • data-scroll-sensitivity: Adjusts scrolling responsiveness (default: 0.05)
<body 
  class="mrd-smooth" 
  data-scroll-duration="1000" 
  data-scroll-deceleration="0.9" 
  data-scroll-sensitivity="0.055"
  data-scroll-isScrolling="false"
  data-scroll-velocity="0">

3. That’s it. The library will automatically apply the smooth scroll behavior to all anchor links within your document.

<nav>
  <a href="#section1">Section 1</a>
  <a href="#section2">Section 2</a>
  <a href="#section3">Section 3</a>
</nav>
<section id="section1">Section 1</section>
<section id="section2">Section 2</section>
<section id="section3">Section 3</section>

Changelog:

06/11/2024

  • Update JS

06/03/2024

  • Added more configs

You Might Be Interested In:


Leave a Reply