阅读 456

滚动条回流

这是我听过很多次的关于 MAC 开发者的一点建议,我再说一遍:进入 系统偏好设置 > 通用 > 显示滚动条 并设置为 始终。这个与你使用无关,但与 web 开发有关系。如果没有设置这个,你将永远不会遇到滚动条触发的布局变化,但其他人可能设置了。既然你希望围绕不会导致这种类型的问题进行设计,那么自己也应该设置这个选项。

Stefan Judis 展示了使用视口单位的可能原因之一:

twitter.com/i/status/14…

视频里,100vw 会导致水平溢出,因为垂直滚动条已经出现了,占用了一些空间。不知怎么的,我觉得很不对劲。

Stefan 找到了 Kilian Valkhof 关于如何解决这个问题的经典文章:

简单的解决办法是使用 width: 100% 代替。百分比不包括滚动条的宽度,因此将自动适应。

如果您不能这样做,或者您正在设置另一个元素的宽度,那么将 overflow-x: hiddenoverflow: hidden 添加到周围的元素,以防止出现滚动条。

Kilian Valkhof如何找到触发水平滚动条的原因?

我想说这些都只是奇技淫巧,因为它们都不完全匹配你想做的事情。

幸运的是,有一个基于规范的解决方案即将推出:

在 web 上显示滚动条的一个副作用是,内容的布局可能会根据滚动条的类型而改变。CSS 的 scrollbar-gutter 属性(不久将与 Chromium 一起发布),旨在让我们的开发者对此有更多的控制权。

Bramus Van Damme, “Prevent unwanted Layout Shifts caused by Scrollbars with the scrollbar-gutter CSS property”

听起来像个小把戏,如果这成为 reset 样式表 中的一个常见行,我也不会感到惊讶:

body {
  scrollbar-gutter: stable both-edges;
}
复制代码

这让我感到很惊奇…… 是 <body> 标签在整个页面层面上处理这个问题吗?不是 <html> 标签 ?这在放在过去与滚动相关的场景中是很奇怪的。

我们真的要让它覆盖所有浏览器吗?谁知道呢,目前看来可能性很大。但是即使它即将发布,但这种行为还是很特殊,我依然会去处理,感觉渐进增强会更友好一些。

原文链接:css-tricks.com/scrollbar-r…

文章分类
前端