[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)
• -> 如果你打算解决上面的问题,你会写很多很多的代码,比如动态目标位置计算,加减速控制等(相信我 我写过)
• -> 啥都不如浏览器原生的好