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 judg…


This content originally appeared on DEV Community and was authored by Ismaili Simba

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'
        });
    }

}
      }


This content originally appeared on DEV Community and was authored by Ismaili Simba


Print Share Comment Cite Upload Translate Updates
APA

Ismaili Simba | Sciencx (2021-08-10T07:50:12+00:00) Making Horizontal Mouse Scrolling With HTML, CSS, and JavaScript. Retrieved from https://www.scien.cx/2021/08/10/making-horizontal-mouse-scrolling-with-html-css-and-javascript/

MLA
" » Making Horizontal Mouse Scrolling With HTML, CSS, and JavaScript." Ismaili Simba | Sciencx - Tuesday August 10, 2021, https://www.scien.cx/2021/08/10/making-horizontal-mouse-scrolling-with-html-css-and-javascript/
HARVARD
Ismaili Simba | Sciencx Tuesday August 10, 2021 » Making Horizontal Mouse Scrolling With HTML, CSS, and JavaScript., viewed ,<https://www.scien.cx/2021/08/10/making-horizontal-mouse-scrolling-with-html-css-and-javascript/>
VANCOUVER
Ismaili Simba | Sciencx - » Making Horizontal Mouse Scrolling With HTML, CSS, and JavaScript. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/10/making-horizontal-mouse-scrolling-with-html-css-and-javascript/
CHICAGO
" » Making Horizontal Mouse Scrolling With HTML, CSS, and JavaScript." Ismaili Simba | Sciencx - Accessed . https://www.scien.cx/2021/08/10/making-horizontal-mouse-scrolling-with-html-css-and-javascript/
IEEE
" » Making Horizontal Mouse Scrolling With HTML, CSS, and JavaScript." Ismaili Simba | Sciencx [Online]. Available: https://www.scien.cx/2021/08/10/making-horizontal-mouse-scrolling-with-html-css-and-javascript/. [Accessed: ]
rf:citation
» Making Horizontal Mouse Scrolling With HTML, CSS, and JavaScript | Ismaili Simba | Sciencx | https://www.scien.cx/2021/08/10/making-horizontal-mouse-scrolling-with-html-css-and-javascript/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.