CSS⿏标滚轮滚动横向滚动条的⼀种另类实现思路
⿏标滚轮默认控制元素的纵向滚动条
如果使⽤css transform变换，使纵向滚动条横向展⽰，是否可以实现滚轮控制横向滚动效果呢
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scrollx</title>
</head>
<style>
.rot{
position: absolute; /* 脱离⽂档流，不占⽤transform之前的空间 */
background-color: #777;
height: 400px; /*宽度*/
transform: rotateZ(-90deg) rotateY(180deg); /* 逆时针旋转90度，再对y轴翻转 */
transform-origin: left top;
overflow-x: hidden;
}
.innerot{
display: flex;
css鼠标点击样式/
* width: 300px; *//*⾃动撑开*/
/* height: 30px; *//*⾃动撑开*/
background-color: 777;
transform-origin: left bottom;
flex-wrap: nowrap; /*禁⽌换⾏*/
/* 内层通过js控制transfrom */
}
.pan{
width: 100px;
height: 30px;
line-height: 30px;
flex-shrink: 0; /* 禁⽌压缩 */
background-color: #777;
color: #ddd;
border-right: 1px solid #555;
padding: 0 6px;
}
/* 滚动条样式调整 */
.rot::-webkit-scrollbar{
width: 3px;
background-color: #777;
}
.
rot::-webkit-scrollbar-thumb{
background-color: #ccc;
opacity: 0.5;
transition: all ease 1s;
}
.rot::-webkit-scrollbar-thumb:active{
background-color: #ddd;
}
</style>
<body>
<div class="rot">
<div class="innerot">
<div class="pan" >1</div>
<div class="pan" >2</div>
<div class="pan" >2</div>
<div class="pan" >3</div>
<div class="pan" >4</div>
<div class="pan" >5</div>
</div>
</div>
</body>
<script>
let innerot = ElementsByClassName('innerot')[0];
let rot = ElementsByClassName('rot')[0];
rot.style.width = innerot.clientHeight + 3 + 'px'; // 3px 预留滚动条
ansform = `translateY(-${innerot.clientHeight}px) rotateZ(90deg) rotateX(180deg) translateY(${innerot.clientHeight}px)`; </script>
</html>
效果
chrome使⽤效果正常
优点是原⽣滚动，应该⽐js onwheel 控制滚动性能要好⼀点点点
缺点是由于transfrom，原横向滚动条变为纵向滚动条仍不能使⽤

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。