移动端H5 css3自定义滚动条样式

主要是样式代码如下:

 ::-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 类名即可。

上一篇:滚动条样式设置


下一篇:设置滚动条样式