Implement Horizontal Scrolling with Mouse Wheel Using Pure CSS

In some web applications, it’s common to encounter the need for horizontal scrolling controlled by the mouse wheel. By default, browsers use the mouse wheel to scroll vertically, but with the right layout and CSS styling, you can simulate an elegant horizontal scrolling effect.

This article demonstrates how to achieve this functionality using a specific example with CSS and HTML structure.

Final Effect

Implementation Ideas

Step1: Create a div.image-list. Place multiple cards horizontally in this container. step1

Step2: Rotate div.image-list 90° clockwise. Wrap the div.image-list inside a new div.x-scroll-content. Then, add a height to div.x-scroll-content to display a vertical scrollbar. step2

Step3: Rotate div.x-scroll-content 90° counterclockwise. Finally, create a new div.x-scroll to control the overall height and width. step3

Use Cases

Horizontal image galleries.
Product card displays on e-commerce websites.
Horizontally scrolling tables in data analysis dashboards.

Conclusion

This article demonstrates how to use simple HTML and CSS to achieve mouse wheel-driven horizontal scrolling. By rotating the container and controlling the scrolling direction, you can create a smooth and engaging scrolling experience. If you have similar requirements in your project, feel free to try this approach!