log("滚动条宽度:", scrollbarWidth, "px"); // 删除临时div document.body.removeChild(scrollDiv); 方法二:使用浏览器特性 在某些情况下,我们可以利用浏览器的特定属性来获取滚动条的宽度。例如,在Chrome和Safari等基于WebKit的浏览器中,我们可以使用window.innerWidth和document.documentElement.clientWidth来计算...
只读窗口属性 innerWidth 返回窗口的内部宽度(以像素为单位)。这包括垂直滚动条的宽度(如果存在)。 clientWidth 在像document 这样的根元素上使用时返回视口的宽度,不包括滚动条。 当clientWidth 用于根元素(元素)(或者如果文档处于 quirks 模式时),将返回视口的宽度(不包括任何滚动条)。 let scrollbarWidth = (win...
scrollbar-width: thin; scrollbar-width: none; } scrollbar-width: auto:系统默认的滚动条宽度。 scrollbar-width: thin:系统提供的瘦滚动条宽度,或者比默认滚动条宽度更窄的宽度 scrollbar-width: none:不显示滚动条,但是该元素依然可以滚动 简单示意图如下: 完整的 DEMO,你可以戳这里:CodePen Demo -- Scr...
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 文档中都明确了不应该在生产环境使用它。
Chrome 在 121 版本开始,原生支持了两个滚动条样式相关的样式 scrollbar-color 和 scrollbar-width。 要知道,在此前,虽然有::-webkit-scrollbar规范可以控制滚动条,可是,::-webkit-scrollbar是非标准特性,在 MDN 文档中都明确了不应该在生产环境使用它。
Chrome 在 121 版本开始,原生支持了两个滚动条样式相关的样式 scrollbar-color 和 scrollbar-width。 要知道,在此前,虽然有::-webkit-scrollbar规范可以控制滚动条,可是,::-webkit-scrollbar是非标准特性,在 MDN 文档中都明确了不应该在生产环境使用它。
浏览器和操作系统之间的滚动条宽度可能有所不同，不幸的是，CSS没有提供检测这些宽度的方法:我们需要使用...
对于仅适用于 webkit 浏览器的其他解决方案（chrome、safari 和较新的 Edge）
scrollbar-width和scrollbar-color是 Firefox 滚动条样式的属性。scrollbar-width: thin;会使滚动条变细,而scrollbar-color用于定义滚动条的颜色。在这里,滚动条颜色被设置为灰色 (#999999),滚动条轨道的颜色被设置为淡灰色 (#f0f0f0)。 对于Webkit 内核的浏览器(如 Chrome 和 Safari),使用::-webkit-scrollbar...