鼠标滚轮控制横向滚动条

本文提供一种纯css实现的滚轮控制横向滚动条的实现方案。

 步骤一：

按照上面的布局书写布局+css样式

    

        
1234
    

.scroll-box {
    width: 100px;
    height: 500px;
    border: 1px solid red;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}
.content-box {
    width: fit-content;
    height: 100px;
    border: 1px solid green;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 100px;
    line-height: 100px;
}

此时 scroll-box 担任的角色就是滚动容器，设置的是y方向的滚动；content-box 担任的是内容盒子，它的宽度由内容决定，所以不存在滚动条。

步骤二：

根据上图绿色箭头的位置，顺时针旋转 content-box 90deg。

transfrom: rotate 方法默认的旋转位置为元素的中心点，所以需要通过 transfrom-origin 来修改旋转原点

.content-box {
    width: fit-content;
    height: 100px;
    border: 1px solid green;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 100px;
    line-height: 100px;
    transform-origin: 0 0; // 步骤二新增
    transform: rotate(90deg); // 步骤二新增
}

 步骤三：

此时可以看到，scroll-box 已经出现滚动条了，现在只需要再次旋转 scroll-box 就行了

 步骤四：

同理，设置 scroll-box 的原点为绿色箭头位置，然后逆时针旋转 90deg，此时左边有100px的空白，所以需要添加 left: -100px;

.scroll-box {
    width: 100px;
    height: 500px;
    border: 1px solid red;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    transform-origin: 100px 0; // 步骤四新增
    transform: rotate(-90deg); // 步骤四新增
    left: -100px; // 步骤四添加
}

步骤五：

隐藏滚动条，就完成最终的效果了

::-webkit-scrollbar {
    display: none;
}