::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条) ::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb) ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。 ::-webkit-scrollbar-track-piece 内层轨道,滚动条...
要知道,在此前,虽然有::-webkit-scrollbar规范可以控制滚动条,可是,::-webkit-scrollbar是非标准特性,在 MDN 文档中都明确了不应该在生产环境使用它。 MDN - ::-webkit-scrollbar Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing ...
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 ...
也就是,当前scrollbar-width只接收 3 个关键字: {/* Keyword values */scrollbar-width: auto; scrollbar-width: thin; scrollbar-width: none; } scrollbar-width: auto:系统默认的滚动条宽度。 scrollbar-width: thin:系统提供的瘦滚动条宽度,或者比默认滚动条宽度更窄的宽度 scrollbar-width: none:不显...
Using Custom Properties for Styling Scrollbars in CSS You could DRY that up a bit withCustom Properties, like: .styled-scrollbars{--scrollbar-foreground:#999--scrollbar-background:#333/* Foreground, Background */scrollbar-color:var(--scrollbar-foreground)var(--scrollbar-background);}.styled...
.section::-webkit-scrollbar-thumb{box-shadow:inset 0 0 6pxrgba(0,0,0,0.3);} With that, we have covered the old way of styling a custom scrollbar in CSS. Let’s explore the new syntax. The new syntax Scrollbar width As it says, this defines the scrollbar width and the values we...
进入页面,打开控制台工具,选中其中一个样式,就能看到该样式的CSS源码。 /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/::-webkit-scrollbar {width:16px;height:16px;background-color:#F5F5F5; }/*定义滚动条轨道 内阴影+圆角*/::-webkit-scrollbar-track ...
scrollbar-width设置滚动条粗细 了解完scrollbar-color后,我们再来看看scrollbar-width。这个从名字也很好理解,设置滚动条的宽度。 那是否和我们想象的一样,可以任意设置滚动条的宽度,甚至乎,可以定制化的设置滑块和轨道的宽度? 遗憾的是,在CSS Scrollbars Styling Module Level 1一期滚动条规范中,这个属性的功能被设置...
Add theoverflow: autoproperty to the container element to enable the scrollbar. Use the:-webkit-scrollbarpseudo-element to style the scrollbar. div{width:370px;height:120px;overflow:auto;}div::-webkit-scrollbar{width:15px;} Customize the scrollbars using CSS properties ( width, height, back...
scrollbar-width设置滚动条粗细 了解完scrollbar-color后,我们再来看看scrollbar-width。这个从名字也很好理解,设置滚动条的宽度。 那是否和我们想象的一样,可以任意设置滚动条的宽度,甚至乎,可以定制化的设置滑块和轨道的宽度? 遗憾的是,在CSS Scrollbars Styling Module Level 1一期滚动条规范中,这个属性的功能被设置...