前言

我不爽前端無法直接滾輪橫向滾動很久了
明明瀏覽器可以直接判斷 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)
• -> 如果你打算解決上面的問題,你會寫很多很多的代碼,比如動態目標位置計算,加減速控制等(相信我 我寫過)
• -> 啥都不如瀏覽器原生的好