[CSS]让overflow不用按shift可以滚轮水平滚动(纯CSS)

前言

我不爽前端无法直接滚轮横向滚动很久了
明明浏览器可以直接判断 x滚动且y不滚动的时候滚轮事件可以直接操作横向滚动
这个是我探究出来的方法,尤其适合这种很多很多小tag的情况

解析

原理是将竖向排列的overflow旋转成横向,实际操作的还是竖向overflow.继而实现鼠标滚轮不用按住shift即可滚动.

<template> <div class=\"tags\" :style=\"{ height }\"> <div class=\"tags-ro\"> <div class=\"tags-list no-scrollbar \"> <slot></slot> </div> </div> </div></template><script setup lang=\"ts\">defineProps({ height: { type: String, default: \'1.5em\' }});</script><style scoped lang=\"less\">.tags { position: relative; height: 1.5em; overflow: hidden; .tags-ro { /*敲重点:通过aspect-ratio设置比例为1(即正方形)*/ aspect-ratio: 1 / 1; transform: rotate(270deg); } .tags-list { display: flex; flex-direction: row; gap: 1em; overflow: auto; text-align: center; text-wrap: nowrap; max-height: 100%; /*敲重点:这个sideways-rl可以实现文本竖着显示(相当于旋转90°)但还不会影响布局*/ writing-mode: sideways-rl; /*让元素对齐到右侧 方便上级剪裁*/ float: right; }}/** * 不显示滚动条 但是可以触摸和滚轮滚动*/.no-scrollbar { overflow: auto; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Internet Explorer 10+ */ &::-webkit-scrollbar { display: none; /* Safari and Chrome */ } &::-webkit-scrollbar-thumb { background: transparent; /* Safari and Chrome */ }}</style>

为啥不用JS

用JS也可以将事件转为横向滚动 但是模拟出来的操作不够丝滑 具体原因:

• 作为一个相当尿性的前端应当少用JS,这可以提升网页运行效率(尤其是在移动端的时候,响应会有很大延迟)
• 模拟JS,也就是自己拦截wheel事件并通过.scroll()方法重新设置水平位置这种方式的弊端:
• -> 滚动距离值得考究 取值比较迷惑
• -> 如果连续滚动的话 会出现卡顿情况(尤其用了smooth)
• -> 如果你打算解决上面的问题,你会写很多很多的代码,比如动态目标位置计算,加减速控制等(相信我 我写过)
• -> 啥都不如浏览器原生的好

按摩椅