自定义scroll滚动条样式

一般chrome浏览器自带scroll:

添加scroll style

　　　　　

　　　　  /* 整个滚动条 */
        ::-webkit-scrollbar {
            width: 6px;
            background-color: #ffffff;
            display: none;
        }
        
        /* 鼠标指针浮动显示 */
        :hover::-webkit-scrollbar{
            display:block;
        }


        /* 滚动条轨道 */
        ::-webkit-scrollbar-track {
            /* 阴影 */
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            background-color: #ffffff;
        }



        /* 滚定条滑块 */
        ::-webkit-scrollbar-thumb {
            border-radius: 30px;
            background-color: #615b5b49;
        }

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

关于scroll:

CSS滚动条选择器

你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:

• ::-webkit-scrollbar — 整个滚动条.
• ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
• ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
• ::-webkit-scrollbar-track — 滚动条轨道.
• ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
• ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
• ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

 

 

 

语法

::-webkit-scrollbar { styles here }

链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar

更多scroll style:

原文 https://www.cnblogs.com/amylis_chen/p/11995324.html