前言

我不爽前端无法直接滚轮横向滚动很久了
明明浏览器可以直接判断 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)
• -> 如果你打算解决上面的问题,你会写很多很多的代码,比如动态目标位置计算,加减速控制等(相信我 我写过)
• -> 啥都不如浏览器原生的好