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>
网络有很多先做成竖向,然后容器旋转+子元素旋转的方式来实现,但基本都是正方形,如果是长方形就不行了
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容