滚动栏回转

Mac开发者们，请注意这个小技巧：前往系统偏好设置 > 通用 > 显示滚动条，并将设置更改为始终显示。这并非为了您个人，而是为了网页的最佳呈现效果。因为如果没有此设置，您将无法体验到滚动条触发的布局偏移，但其他所有启用了此设置的用户都会遇到。为了避免这类性能问题，您应该自己使用此设置。

Stefan Judis演示了视口单位的使用可能是导致此问题的原因之一：

代码中100vw导致水平溢出，因为垂直滚动条已经存在，占用了一部分空间。这感觉非常不合理，但事实就是这样。

Stefan 指向Kilian Valkhof关于处理此问题的文章。经典的解决方法：

简单的方法是使用width: 100%。百分比不包含滚动条的宽度，因此会自动适应。

如果您无法这样做，或者您正在设置另一个元素的宽度，请在周围的元素上添加overflow-x: hidden或overflow: hidden来防止滚动条。

Kilian Valkhof, “如何查找水平滚动条的原因”

我认为这些都是权宜之计，因为它们都不能完全满足您的需求。

幸运的是，即将出现一个基于规范的解决方案。Bramus对此进行了报道：

在网页上显示滚动条时的副作用是，内容的布局可能会根据滚动条的类型而改变。scrollbar-gutter CSS 属性（很快就会在 Chromium 中发布）旨在让我们开发者更好地控制这一点。

Bramus Van Damme, “使用 scrollbar-gutter CSS 属性防止滚动条导致的意外布局偏移”

这听起来像是解决方法，并且我毫不怀疑这将成为重置样式表中非常常见的一行代码：

body {
  scrollbar-gutter: stable both-edges;
}

不过，这让我想到……在处理整个页面级别的滚动条问题时，是scrollbar-gutter属性起作用，对吗？而不是overflow属性？过去在与滚动相关的方面，overflow属性一直很奇怪。我们真的能在所有浏览器中实现它吗？谁知道呢。看起来很有可能，但即使它很接近，并且行为符合规范，我也会尝试使用它。感觉它很适合渐进增强。

以上是滚动栏回转的详细内容。更多信息请关注PHP中文网其他相关文章！