Best way to handle horizontal scrolling to switch lists of data?

1. How do I make a horizontal scrolling container?
2. What is horizontal scrolling?
3. Why is my website scrolling horizontally?

How do I make a horizontal scrolling container?

To enable horizontal scrolling, we can use the CSS property overflow-x. If we assign the value scroll to the overflow-x property of the container element, the browser will hide horizontally overflowing content and make it accessible via horizontal scrolling.

What is horizontal scrolling?

Horizontal scrolling is a one-page navigation method designers can use. In this method, users can use different functionalities on a page to scroll right or left, to see more information within the container or window. Users scroll horizontally by clicking on a scroll bar and dragging it with their mouse or finger.

Why is my website scrolling horizontally?

In short: if you use width: 100vw on a page that has a vertical scrollbar you end up with a horizontal overflow. The easy fix is to use width: 100% instead. Percentages don't include the width of the scrollbar, so will automatically fit.