Making Horizontal Mouse Scrolling With HTML, CSS, and JavaScript
Tags: javascript, design, webdev, css
Published: 2021-08-10 07:50:12

I recently came across a beautiful html5 template featuring horizontal mouse scrolling [here](https://html5up.net/ethereal). 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!](https://github.com/ismailisimba/afrika1).

Now with the inspirational story out of the way, here's how I did it. View the sample [here](https://ismailisimba.github.io/horizontalmousescrolling/).

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##
```HTML
  <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##
```CSS
  .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](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event) to ensure our HTML is loaded before the script starts. We then assign the document's [onwheel](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/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##
```Javascript
  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'
        });
    }

}
      }
```