首页 > 技术文章 > diy 滚动条 样式 ---- 核心代码

tianxiaxuange 2019-04-23 19:05 原文

参考自 : 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)

推荐阅读