JavaScript Smooth Scroll on Mouse Wheel

Smooth scrolling on mouse wheel interactions can greatly improve the user experience of your website. This JavaScript code enables smooth scrolling on mouse wheel interactions. It works by adjusting the scroll position of a webpage in a fluid manner, creating a visually pleasing scrolling effect. This code is helpful for enhancing user experience by providing a smoother and more controlled scrolling behavior on your website.

How to Create Smooth Scroll On Mouse Wheel Using JavaScript

1. Start by creating the HTML structure for your webpage. Ensure you have a container element where you want the smooth scrolling effect to take place. You can give it an id for easy reference in your JavaScript code. For this guide, we’ll use “scroll-container.”

<section class="viewport">
    
  <div id="scroll-container" class="scroll-container">
    <div class="content">
  
      <div class="img-container">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/splash-10.jpg" alt="">
      </div>       
      <div class="img-container">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/splash-14.jpg" alt="">
      </div>  
      <div class="img-container">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/splash-15.jpg" alt="">
      </div>  
      <div class="img-container">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/splash-16.jpg" alt="">
      </div>  
      <!--  REPEAT  -->

      <div class="img-container">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/splash-10.jpg" alt="">
      </div>  
      <div class="img-container">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/splash-14.jpg" alt="">
      </div>  
      <div class="img-container">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/splash-15.jpg" alt="">
      </div>  
      <div class="img-container">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/splash-16.jpg" alt="">
      </div>  
      <!--  REPEAT  -->

      <div class="img-container">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/splash-10.jpg" alt="">
      </div>  
      <div class="img-container">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/splash-14.jpg" alt="">
      </div>  
      <div class="img-container">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/splash-15.jpg" alt="">
      </div>  
      <div class="img-container">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/splash-16.jpg" alt="">
      </div>  
      <!--  REPEAT  -->  

    </div>
  </div>
   
</section>

2. In your CSS, define the necessary styles to support the smooth scrolling effect. The CSS code should include styles for the container and any other relevant elements on your webpage. Here’s a sample CSS code snippet:

*, :after, :before {
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
  overflow-y: scroll;
}

.viewport {
  overflow: hidden;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.scroll-container {
  position: absolute;
  overflow: hidden;
  z-index: 10;
  display: flex;
  justify-content: center;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform-style: preserve-3d;
}

.content {
  width: 60%;
  padding-top: 50px;
}

.img-container {
  margin: 0 0 50px;
}
.img-container img {
  max-width: 100%;
  width: 100%;
  height: auto;
}

3. Load the TweenMax JS by adding the following CDN link just before closing the <body> tag:

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script>

4. Finally, it’s time to implement the JavaScript code that enables the smooth scrolling on mouse wheel interactions. Copy and paste the following JavaScript code into your project. Here’s a brief explanation of the core functions:

The scroller object controls the scrolling behavior, including speed and ease settings.
The onLoad function initializes the scrolling functionality when the page loads.
The updateScroller function smoothly updates the scroll position.
The onScroll and onResize functions handle scroll and resize events.

var html = document.documentElement;
var body = document.body;

var scroller = {
  target: document.querySelector("#scroll-container"),
  ease: 0.05, // <= scroll speed
  endY: 0,
  y: 0,
  resizeRequest: 1,
  scrollRequest: 0,
};

var requestId = null;

TweenLite.set(scroller.target, {
  rotation: 0.01,
  force3D: true
});

window.addEventListener("load", onLoad);

function onLoad() {    
  updateScroller();  
  window.focus();
  window.addEventListener("resize", onResize);
  document.addEventListener("scroll", onScroll); 
}

function updateScroller() {
  
  var resized = scroller.resizeRequest > 0;
    
  if (resized) {    
    var height = scroller.target.clientHeight;
    body.style.height = height + "px";
    scroller.resizeRequest = 0;
  }
      
  var scrollY = window.pageYOffset || html.scrollTop || body.scrollTop || 0;

  scroller.endY = scrollY;
  scroller.y += (scrollY - scroller.y) * scroller.ease;

  if (Math.abs(scrollY - scroller.y) < 0.05 || resized) {
    scroller.y = scrollY;
    scroller.scrollRequest = 0;
  }
  
  TweenLite.set(scroller.target, { 
    y: -scroller.y 
  });
  
  requestId = scroller.scrollRequest > 0 ? requestAnimationFrame(updateScroller) : null;
}

function onScroll() {
  scroller.scrollRequest++;
  if (!requestId) {
    requestId = requestAnimationFrame(updateScroller);
  }
}

function onResize() {
  scroller.resizeRequest++;
  if (!requestId) {
    requestId = requestAnimationFrame(updateScroller);
  }
}

That’s all! hopefully, you have successfully created a smooth scroll effect on the mouse wheel using JavaScript. If you have any questions or suggestions, feel free to comment below.

Similar Code Snippets:

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.

Code Snippet:	Smooth Page Scroll
Author:	Dominik
Published:	January 10, 2024
Last Updated:	January 22, 2024
Downloads:	2,385

License:	MIT
Edit Code online:	View on CodePen

How to Create Smooth Scroll On Mouse Wheel Using JavaScript

Similar Code Snippets:

Leave a Comment Cancel reply