::-webkit-scrollbar-thumb 滚动条上的滚动滑块 eg:设置滑块背景色 .box::-webkit-scrollbar-thumb{background-color:blue;} ::-webkit-scrollbar-track 滚动条轨道, 与::-webkit-scrollbar不同的是::-webkit-scrollbar-track设置的是滑块可滑动区域的样式。 eg: 设置滚动条轨道背景色 .box::-webkit-scroll...
::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条) ::-webkit-scrollbar-track滚动条的轨道(里面装有Thumb) ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。 ::-webkit-scrollbar-track-piece 内层轨道,滚动条中...
1.认识滚动条 设置scrollbar的为CSS伪元素,对应上图的数字: ::-webkit-scrollbar{/* 1 */}::-webkit-scrollbar-button{/* 2 */}::-webkit-scrollbar-track{/* 3 */}::-webkit-scrollbar-track-piece{/* 4 */}::-webkit-scrollbar-thumb{/* 5 */}::-webkit-scrollbar-corner{/* 6 */}::...
设置scrollbar的为CSS伪元素,对应上图的数字: ::-webkit-scrollbar { /* 1 */ } ::-webkit-scrollbar-button { /* 2 */ } ::-webkit-scrollbar-track { /* 3 */ } ::-webkit-scrollbar-track-piece { /* 4 */ } ::-webkit-scrollbar-thumb { /* 5 */ } ::-webkit-scrollbar-corner...
::-webkit-scrollbar-corner选择器,用于设置滚动条的角的样式。使用该选择器,我们可以设置滚动条角的的颜色、背景、边框等样式。 1 2 3 ::-webkit-scrollbar-corner { background-color:#f1f1f1; } 使用自定义的CSS类来设置滚动条样式(局部元素滚动条样式) ...
scrollbar-width设置滚动条粗细 了解完scrollbar-color后,我们再来看看scrollbar-width。这个从名字也很好理解,设置滚动条的宽度。 那是否和我们想象的一样,可以任意设置滚动条的宽度,甚至乎,可以定制化的设置滑块和轨道的宽度? 遗憾的是,在CSS Scrollbars Styling Module Level 1一期滚动条规范中,这个属性的功能被设置...
scrollbar-width设置滚动条粗细 了解完scrollbar-color后,我们再来看看scrollbar-width。这个从名字也很好理解,设置滚动条的宽度。 那是否和我们想象的一样,可以任意设置滚动条的宽度,甚至乎,可以定制化的设置滑块和轨道的宽度? 遗憾的是,在CSS Scrollbars Styling Module Level 1一期滚动条规范中,这个属性的功能被设置...
Chrome 在 121 版本开始,原生支持了两个滚动条样式相关的样式 scrollbar-color 和 scrollbar-width。 要知道,在此前,虽然有::-webkit-scrollbar规范可以控制滚动条,可是,::-webkit-scrollbar是非标准特性,在 MDN 文档中都明确了不应该在生产环境使用它。
What if we had an API that wasn’t CSS, but let us say: “I want a Mac style double on the bottom button scrollbar. And, here is a thumb, here is a track, go for it”. That being said, at least we do have the ability to do this kind of thing now. I hope that other ...
滚动条组成 -webkit-scrollbar 滚动条整体部分 -webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是...