css怎么实现鼠标滚轮横向移动?

作者站长头像
站长
· 阅读数 7

css怎么实现鼠标滚轮横向移动?现在有这么一个效果,x轴超出宽度就出现滚动条

想要实现鼠标滚轮滚动的效果(这里不讨论shift+滚轮和苹果鼠标等等的情况)

案例最小实现demo

<style>
  .horizontal-scroll-wrapper {
    width: 500px;
    display: flex;
    background: #abc;
    overflow-x: auto;
    gap: 10px;
  }

  .horizontal-scroll-wrapper>div {
    display: block;
    background: #cab;
    width: 100px;
    height: 250px;
    flex-shrink: 0;
  }
</style>

<div class="horizontal-scroll-wrapper">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
  <div>item 6</div>
  <div>item 7</div>
  <div>item 8</div>
</div>

网络有很多先做成竖向,然后容器旋转+子元素旋转的方式来实现,但基本都是正方形,如果是长方形就不行了css怎么实现鼠标滚轮横向移动?

回复
1个回答
avatar
test
2024-07-05

为什么通过 transform:rotate() 转向不能实现?只不过比较弯弯绕绕罢了,所以通过JS会比较方便。

🌰 通过CSS控制

🌰 通过JS控制

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容