写一个div作为容器,里面添加需要滚动的内容,然后给它上样式
<div class='left-scroll'>
</div>
<style lang='scss'>
.left-scroll{
width: 100%;
height: 680px;
overflow-y: scroll; //给竖轴加滚动条
overflow-x:scroll;//给横轴加滚动条
&::-webkit-scrollbar { /*滚动条整体样式*/
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 10px;
}
&::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
background: rgba(0, 0, 0, 0); //把背景色设为透明就看不到滚动模块啦,也可以设置为其他样式
cursor: pointer;
}
&::-webkit-scrollbar-track { /*滚动条里面轨道*/
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
border-radius: 0;
background: rgba(0, 0, 0, 0);
}
}
</style>