Making Horizontal Mouse Scrolling With HTML, CSS, and JavaScript

I recently came across a beautiful html5 template featuring horizontal mouse scrolling here. I'm not sure how they do it, so instead of trying to find that out, like any self-respecting coder I decided to come up with my own "better way".

You can judge the results for yourself here!.

Now with the inspirational story out of the way, here's how I did it. View the sample here.

First, the HTML. You'll need an outer container element, an inner container element and then your items will go in this inner container.

HTML Code

  <div class="outercontainer" id=""scrl1>
      <div class="innercontainer">
           <div class="item">I</div>
        <div class="item">Used</div>
        <div class="item">To</div>
        <div class="item">Rule</div>
        <div class="item">The</div>
        <div class="item">World</div>
        <div class="item">Seas</div>
        <div class="item">Would</div>
        <div class="item">Rise</div>
        <div class="item">When</div>
        <div class="item">I</div>
      </div>
    </div>

Second, the CSS. The important thing to note here is if the viewport is scrollable, then by default whenever the wheel is scrolled, the page will scroll vertically. To prevent this, just make sure all content fits within the viewport vertically. Then, we make the outer container scrollable and the inner container non scrollable. We also hide the scrollbar so you can't scroll manually unless its a touch device.

CSS Code

  .outercontainer{
      width: 96%;
      background-color: black;
      min-height: 96vh;
      margin: 0 auto;
      overflow-x: scroll;
      position: relative;
      scrollbar-width: none; 
      -ms-overflow-style: none;
    }
    .outercontainer::-webkit-scrollbar { display: none;}

    .innercontainer {
      width: fit-content;
      box-sizing: border-box;
      padding: 24px 48px;
      height: 85vh;
      background-color:  black;

      display: flex;
      flex-flow: row;
      justify-content: flex-start;
      align-items: center;
    }

    .item {
      width: 269px;
      height: 96%;
      background-color: white;
      box-sizing: border-box;
      padding-top: 6.69%;
      margin-right: 24px;
      text-align: center;
      font-size: large;
      font-weight: bold;
    }

    .item:last-child{
      margin-right: 0px;
    }

Finally, the Javascript. We bundle all our functions inside window.onload to ensure our HTML is loaded before the script starts. We then assign the document's onwheel event to our customScrollFunction. Every time the event happens (a wheel scroll), our function is called. Then we read the event's deltaY value. If this value is negative the wheel is going down and if its positive then the wheel is going up. We use a simple if to scroll our container left or right accordingly.

JavaScript Code - Client Side

  window.onload = () => {
        document.onwheel = customScrollFunction;

        function customScrollFunction(event){

    let deltaY = event.deltaY;
    let deltaYSign = Math.sign(deltaY);

    if(deltaYSign==-1){
        document.getElementById("scrl1").scrollBy({
            top: 0,
            left: -169,
            behavior: 'auto'
          });

    }else{ 
        document.getElementById("scrl1").scrollBy({
            top: 0,
            left: 169,
            behavior: 'auto'
        });
    }

}
      }

Blog

Making Horizontal Mouse Scrolling With HTML, CSS, and JavaScript

Ismaili Simba

HTML Code

CSS Code

JavaScript Code - Client Side

Join Our Newsletter. No Spam, Only the good stuff.

Related