scrollbar-width: auto:系统默认的滚动条宽度。 scrollbar-width: thin:系统提供的瘦滚动条宽度,或者比默认滚动条宽度更窄的宽度 scrollbar-width: none:不显示滚动条,但是该元素依然可以滚动 简单示意图如下: 完整的 DEMO,你可以戳这里:CodePen Demo -- Scrollbar-width Demo 总结一下 可以看到,其实就目前scroll...
scrollbar-width: auto:系统默认的滚动条宽度。 scrollbar-width: thin:系统提供的瘦滚动条宽度,或者比默认滚动条宽度更窄的宽度 scrollbar-width: none:不显示滚动条,但是该元素依然可以滚动 简单示意图如下: 完整的 DEMO,你可以戳这里:CodePen Demo -- Scrollbar-width Demo 总结一下 可以看到,其实就目前scroll...
Chrome 在 121 版本开始,原生支持了两个滚动条样式相关的样式 scrollbar-color 和 scrollbar-width。 要知道,在此前,虽然有::-webkit-scrollbar规范可以控制滚动条,可是,::-webkit-scrollbar是非标准特性,在 MDN 文档中都明确了不应该在生产环境使用它。 MDN - ::-webkit-scrollbar Non-standard: This feature...
用我们新学的知识创建一个暗色主题的滚动条，它的边框是圆形的（灵感来自 CSS Tricks 网站）：html::-webkit-scrollbar { width: 20px; } html::-webkit-scrollbar-track { background-color: black; } html::-webkit-scrollbar-thumb { background: #4e4e4e; border-radius: 25px;...
function getScrollBarWidth () { var inner = document.createElement('p'); inner.style.width = "100%"; inner.style.height = "200px"; var outer = document.createElement('div'); outer.style.position = "absolute"; outer.style.top = "0px"; ...
scrollbar-width和scrollbar-color是 Firefox 滚动条样式的属性。scrollbar-width: thin;会使滚动条变细,而scrollbar-color用于定义滚动条的颜色。在这里,滚动条颜色被设置为灰色 (#999999),滚动条轨道的颜色被设置为淡灰色 (#f0f0f0)。 对于Webkit 内核的浏览器(如 Chrome 和 Safari),使用::-webkit-scrollbar...
从下面的 URL 中,您可以看到“scrollbar-width”在浏览器中非常不受欢迎,因此这可能是它不起作用的原因 => 你可以像这样使用WebKit 您有一个具有滚动功能的元素。 在同一个滚动元素上设置“::-webkit-scrollbar” => .scroll-element::-webkit-scrollbar { 宽度:4px; 高度:100%;背景颜色:灰色;} 请记住,...
The scrollbar-width property allows the author to set the maximum thickness of an element's scrollbars when they are shown.
一、scrollbar-color和scrollbar-width scrollbar-color和scrollbar-width这两个CSS属性在在我的新书 《CSS新世界》 中有过介绍,在章节13.1.5。 其中scrollbar-color可以定义滚动条的颜色,语法如下: scrollbar-width可以设置滚动条的宽度,不过这个宽度不能随意指定,是有约束的,语法如下所示: ...
.scrollable-element{scrollbar-width:thin;} textareawithscrollbar-width: thin; Or, we can set the width tononeto remove it entirely, saving even more space (assuming we’re OK with the scrollbar disappearing): .scrollable-element{scrollbar-width:none;} ...