鼠标滚轮控制横向滚动条

最新推荐文章于 2024-07-12 16:05:19 发布

Lccccb

最新推荐文章于 2024-07-12 16:05:19 发布

阅读量2.5k

点赞数 1

文章标签：前端 css javascript

本文链接：https://blog.csdn.net/Lccccb/article/details/129936963

版权

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

步骤一：

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

<body>
    <div class="scroll-box">
        <div class="content-box">1234</div>
    </div>
</body>

.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;
}

Lccccb

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
鼠标滚轮控制横向滚动条

纯css实现滚轮控制横向滚动条
复制链接

扫一扫