滚动条基本样式设置在哪(滚动条基本样式设置怎么设置)

滚动条基本样式设置

::-webkit-scrollbar系列属性

详细说明：-webkit-scrollbar注：如果不设置滚动溢出相关属性，滚动条样式系列属性将不会生效。属性：-webkit-scrollbar整个滚动条。-webkit-scrollbar-button滚动条上的按钮。-webkit-scrollbar-thumb滚动条上的滚动滑块。-webkit-scrollbar-track滚动条轨道。-webkit-scrollbar-track-piece滚动条没有滑块的轨道部分。-webkit-scrollbar-corner同时存在垂直滚动条和水平滚动条时的交叉部分。通常位于浏览器窗口的右下角。-webkit-resizer出现在某些元素的底角的可拖动调整大小滑块。注意：当这一系列属性没有先设置为：-webkit-scrollbar时，其他滚动条相关样式将不会生效。常用：-webkit-scrollbar、-webkit-scrollbar-thumb、-webkit-scrollbar-track

属性使用示例

不使用该系列属性时的样式

随后，设置更强的颜色，以便轻松区分属性有效的部分。-webkit-scrollbar整个滚动条divdivclass='father'divclass='child'子元素，高度大于父元素，打开父元素/div/div/divstyle.father{background:#eee;宽度：400px；高度：600px；溢出-y:自动；margin:50px自动；}.child{height:700px;字体大小：20px；font-weight:bold;}:-webkit-scrollbar{/*设置滚动条宽度*/width:20px;/*设置滚动条背景色*/background:blue;}/style

:-webkit-scrollbar-button滚动条上的按钮divdivclass='father'divclass='child'子元素，高度大于父元素，父元素打开/div/div/divstyle.father{background:#eee;宽度：400px；高度：600px；溢出-y:自动；margin:50px自动；}.child{height:700px;字体大小：20px；font-weight:bold;}:-webkit-scrollbar{/*设置滚动条宽度*/width:20px;/*设置滚动条背景颜色*/background:blue;}:-webkit-scrollbar-button{/*滚动条上下箭头的颜色*/background:yellow;}/style

:-webkit-scrollbar-thumb滚动条上的滚动滑块divdivclass='father'divclass='child'子元素，高度大于父元素，父元素打开/div/div/divstyle.father{background:#eee;宽度：400px；高度：600px；溢出-y:自动；margin:50px自动；}.child{height:700px;字体大小：20px；font-weight:bold;}:-webkit-scrollbar{/*设置滚动条宽度*/width:20px;/*设置滚动条背景颜色*/background:blue;}:-webkit-scrollbar-button{/*滚动条上下箭头的颜色*/background:yellow;}:-webkit-scrollbar-thumb{/*滚动条滑动块圆角*/border-radius:8px;/*滚动条滑块背景色*/background:skyblue;}/style

:-webkit-scrollbar-track滚动条轨道divdivclass='father'divclass='child'子元素，高度大于父元素，打开父元素/div/div/divstyle.father{background:#ee；宽度：400像素；高度：600px；溢出-y:自动；margin:50px自动；}.child{height:700px;字体大小：20px；font-weight:bold;}:-webkit-scrollbar{/*设置滚动条宽度*/width:20px;/*设置滚动条背景颜色*/background:blue;}:-webkit-scrollbar-button{/*滚动条上下箭头的颜色*/background:yellow;}:-webkit-scrollbar-thumb{/*滚动条滑块圆角*/border-radius:8px;/*滚动条滑块背景色*/background:skyblue;}:-webkit-scrollbar-track{/*滚动条轨道背景色*/background:Orange;/*滚动条轨道圆角*/border-radius:10px;}/style

:-webkit-scrollbar-track-piece不带滑块的滚动条轨道部分divdivclass='father'divclass='child'子元素，高度大于父元素，父元素/div/div/divstyle.father已打开。{背景：#eee;宽度：400px；高度：600px；溢出-y:自动；margin:50px自动；}.child{height:700px;字体大小：20px；font-weight:bold;}:-webkit-scrollbar{/*设置滚动条宽度*/width:20px;/*设置滚动条的背景颜色*/background:blue;}:-webkit-scrollbar-button{/*滚动条上下箭头的颜色*/background:Yellow;}:-webkit-scrollbar-拇指{/*滚动条滑块圆角*/border-radius:8px;/*滚动条滑块背景色*/background:skyblue;}:-webkit-scrollbar-track{/*滚动条轨道背景色*/background:Orange;/*滚动条轨道圆角*/border-radius:10px;}:-webkit-scrollbar-track-piece{/*滚动条轨道背景色*//*覆盖在轨道上方，黑色半透明和橙色叠加*/background:rgba(0,0,0,0.3);}/样式

:-webkit-scrollbar-corner同时存在垂直滚动条和水平滚动条时的交叉部分。通常是浏览器窗口右下角的divdivclass='father'divclass='child'子元素。高度大于父元素，打开父元素/div/div/divstyle.father{background:#eee;宽度：400px；高度：600px；溢出-y:自动；margin:50px自动；}.child{height:700px;宽度：700px；字体大小：20px；font-weight:bold;}:-webkit-scrollbar{/*设置滚动条宽度*/width:20px;/*设置滚动条背景颜色*/background:blue;}:-webkit-scrollbar-button{/*滚动条上下箭头的颜色*/background:yellow;}:-webkit-scrollbar-thumb{/*滚动条滑块圆角*/border-radius:8px;/*滚动条滑块高度*/height:100px;/*滚动条滑块背景色*/background:skyblue;}:-webkit-scrollbar-track{/*滚动条轨道背景色*/background:Orange;/*滚动条轨道圆角*/border-radius:10px;}:-webkit-scrollbar-track-piece{/*滚动条轨道背景色*//*覆盖在轨道上方，黑色半透明和橙色叠加*/background:rgba(0,0,0,0.3);}:-webkit-scrollbar-corner{/*水平和垂直滚动条相交的背景色*/background:red;}/style

:-webkit-resizer是一个可拖动的调整大小滑块div，出现在某些元素的底角。divclass='father'divclass='child'子元素。高度大于父元素，父元素/div/div打开。/divstyle.father{background:#eee;/*原来宽度是400px，下图是拖动后的样式，明显比400px宽*/width:400px;高度：600px；/*该设置不会溢出，其他滚动条样式设置无效*/overflow:hidden;/*父元素设置可拖动属性*/resize:Horizontal;margin:50px自动；}.child{height:700px;宽度：700px；字体大小：20px；font-weight:bold;}:-webkit-resizer{/*设置右下角可拖动部分的背景色*/background:rgba(0,0,0,0.3);}/style

基本应用

divdivclass='father'divclass='child'子元素，高度大于父元素，打开父元素/div/div/divstyle.father{background:#eee;宽度：400px；高度：600px；溢出-y:自动；Margin:50px自动；}。孩子{Height:700px;字体大小：20px；font-weight:粗体；}:-webkit-scrollbar{widtttttth:5px;background:#eee;}:-weight-scrollbar-track{-webkit-box-shadow:插入006pxrgba(255,255,255,0.3);border-radius:3px;}:-webkit-scrollbar-thumb{border-radius:3px;}高度：100px；背景颜色：#ccc;}/样式

兼容性