主要是样式代码如下:
::-webkit-scrollbar { /* 滚动条整体样式 */ width: 5px; /*高宽分别对应横竖滚动条的尺寸*/ height: 5px; } ::-webkit-scrollbar-thumb { /* 滚动条里面小方块 */ border-radius: 5px; // -webkit-box-shadow: inset 0 0 5px #FF5E00; background: #FF5E00; } ::-webkit-scrollbar-track { /* 滚动条里面轨道 */ // -webkit-box-shadow: inset 0 0 5px #FFD6B1; border-radius: 5px; background: #FFD6B1; } .auto-scroll { overflow: overlay } /* 需要滚动的地方加上这个class */ .auto-scroll ::-webkit-scrollbar { /* 组件内滚动条不显示 */ display: none; } .auto-scroll:hover ::-webkit-scrollbar { /* 悬停时滚动条才显示 */ display: block; }
在需要滚动的元素上加入 auto-scroll 类名即可。