How to Create Horizontal Scrolling Containers [HTML, CSS, JS]

Scrolling using a mouse wheel or a trackpad generally scrolls a webpage vertically. Recently, I was given a new design to be implemented which includes several horizontal scrolling containers, where the containers must scroll horizontally while scrolling normally with the mouse wheel or trackpad in up and down direction. These horizontally scrolling containers were placed in between other elements in the page.

Hence, I had to implement it in a way so that when we start scrolling, the page scrolls vertically in general, and when the mouse pointer is over the horizontal scrolling container, the scrolling direction automatically changes to horizontal scrolling. After reaching the end of the horizontal scroll, the direction of the scroll changes back to vertical scroll.

Below are the steps to create a Horizontal Scrolling Container using minimal HTML, CSS, JS code, which works on all devices.

Let’s first create the simple container with child items using HTML.

<div id="horizontalScroll">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

Using CSS, we will display the child items in a row. Here we will use flex box.

#horizontalScroll {
  margin: 150px auto;
  display: flex;
  width: 50%;
  gap: 5px;
}

We will use overflow-x: scroll; in CSS to activate the horizontal scroll for the container.

#horizontalScroll {
  margin: 150px auto;
  display: flex;
  overflow-x: scroll;
  width: 50%;
  gap: 5px;
}

We can design the child items as per design requirement. Here, I will resize the child elements and assign colors to make them distinct.

#horizontalScroll div {
  min-width: 150px;
  height: 150px;
  background: #F0803C;
  text-align: center;
  align-content: center;
  font-size: 3rem;
  color: white;
  padding: auto;
}

#horizontalScroll div:nth-child(even) {
  background: #4C956C;
}

Now, we will switch the default scroll behaviour from vertical to horizontal when the mouse is over the container. To do this, we will write some JS functions.

In the Simple Method, we will switch from vertical to horizontal scroll when the mouse is over the container. This method will not switch back from horizontal to vertical scroll automatically after the scroll ends. The scroll direction will be back to vertical when you move the mouse away from the container.

horizontalScroll.addEventListener('wheel', (ev) => {
  ev.preventDefault();
  horizontalScroll.scrollLeft += ev.deltaY + ev.deltaX;
});

In the Advance Method, we will switch from vertical to horizontal scroll when the mouse is over the container and switch back to vertical scroll when the horizontal scroll reaches either of its ends.

horizontalScroll.addEventListener('wheel', (ev) => {
  switchScrollDirection(ev,horizontalScroll);
});

function switchScrollDirection(ev,elem){
    const contentWidth = elem.scrollWidth - elem.clientWidth;
    if(ev.deltaY > 0){
        if(elem.scrollLeft == contentWidth) {
            elem.scrollTop += ev.deltaY + ev.deltaX;
        }else{
            ev.preventDefault();
            elem.scrollLeft += ev.deltaY + ev.deltaX;
        }
    }

    if(ev.deltaY < 0){
        if(elem.scrollLeft == 0) {
            elem.scrollTop += ev.deltaY + ev.deltaX;
        }else{
            ev.preventDefault();
            elem.scrollLeft += ev.deltaY + ev.deltaX;
        }
    }
}

Check the CodePen below to see the horizontal scrolling container in action. You can also check the complete code here.

See the Pen Easy Horizontal Scroll by Rajesh Patra (@rajesh_patra) on CodePen.

There are several other ways to create a horizontal scrolling container, but I feel this is the simplest way, since in this way we do not require including a third party library.

Happy Coding !