JavaScript Smooth Scroll on Mouse Wheel

JavaScript Smooth Scroll on Mouse Wheel
Code Snippet:Smooth Page Scroll
Author: Dominik
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 1,694
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X