利用CSS旋转实现鼠标滚轮横向滚动：巧妙解决滚动方向问题

许多网页列表采用水平排列，但默认的鼠标滚轮滚动方向却是垂直的。本文提供一种简洁高效的解决方案，无需监听滚轮事件，即可实现流畅的横向滚动。

挑战：默认垂直滚动

水平排列的列表通常需要横向滚动，但浏览器默认的滚轮事件是垂直滚动，这给用户体验带来了不便。传统的监听滚轮事件并手动控制x轴滚动条的方法，有时会显得不够流畅。

立即学习“前端免费学习笔记（深入）”；

MoltOverflow

Moltbots问答社区 - 提问编程问题，分享解决方案

下载

创新方案：CSS旋转变换

我们采用更巧妙的方法：利用CSS的transform: rotate()属性。通过将容器元素旋转-90度，再将子元素旋转90度，巧妙地将垂直滚动“转化”为横向滚动。

代码示例：

<div style="transform: rotate(-90deg); overflow: auto;">
  <div style="transform: rotate(90deg);">
    <!-- 列表项 -->
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <!-- ...更多列表项... -->
  </div>
</div>

通过以上代码，容器元素的旋转改变了滚动方向，而子元素的旋转则保证了列表项的正常显示。overflow: auto; 确保容器可以滚动。 这种方法简单直接，并且通常比监听滚轮事件更流畅。