diy 滚动条样式 ---- 核心代码

佚名 6年前 (2019-04-23) 随笔 1318人围观抢沙发百度已收录

参考自： https://blog.csdn.net/qq_38881495/article/details/83689721

                .chapter_data
                  position relative
                  width 100%
                  max-height 390px
                  overflow hidden
                  overflow-y auto
                  box-sizing border-box
                  padding-left 24px
                  /* diy 滚动条核心代码 */
                  &::-webkit-scrollbar    /*滚动条整体样式*/
                    width 4px    /*高宽分别对应横竖滚动条的尺寸*/
                    height 4px
                  &::-webkit-scrollbar-thumb    /*滚动条里面小方块*/
                    border-radius 5px
                    -webkit-box-shadow inset 0 0 5px rgba(0,0,0,0.2)
                    background rgba(255, 255, 255, 0.2)
                  &::-webkit-scrollbar-track    /*滚动条里面轨道*/
                    -webkit-box-shadow inset 0 0 5px rgba(0, 0, 0, 0.2)
                    border-radius 0
                    background rgba(0, 0, 0, 0.1)