换个简单点可以复用的思路,既然滚动条一直占用宽度,那么我们把滚动条设置成透明,然后hover上去的时候显示颜色不就可以了吗
.hover-scrollbar {
overflow: auto;
scrollbar-color: transparent transparent;
&::-webkit-scrollbar-thumb {
background-color: transparent;
}
&:hover {
scrollbar-color: #8a8e99 transparent;
&::-webkit-scrollbar-thumb {
background-color: #8a8e99;
}
}
}
把上面的样式放到需要有滚动条的地方即可