CSS content-visibility 属性和奇怪的滚动条行为

Question

我查看了 Google Chrome 85 上可用的 新 CSS 属性 content-visibility，并将其添加到我的样式表中，以提高网站的渲染性能：

.my-page-section {
  content-visibility: auto;
}

问题出在滚动条上。当我将滚动条从顶部拖到底部时，它会有一种“滞后”感：光标到达屏幕底部，但滚动条仍未到页面底部。为了到达页面底部，我需要释放鼠标，向上移动它，然后多次拖动滚动条。

阅读上面链接的文章，我看到了contain-intrinsic-size CSS属性。用一个合理的值添加它可以减少滚动条的问题，但仍然会发生。我认为这是因为我的应用程序生成动态内容，没有一个带有“my-page-section”类的HTML div具有相同的大小：

.my-page-section {
  content-visibility: auto;
  contain-intrinsic-size: 250px;
}

我的问题是：如何使用content-visibility属性提高页面渲染性能，而不妨碍喜欢拖动滚动条而非使用鼠标滚轮的用户？

- lgfischer

---

我也在思考这个问题。考虑使用 MutationObserver 来在渲染后更改属性为 content-visibility: visible，但是不确定如何设置 contain-intrinsic-size 而避免猜测。 - marcellothearcane

这是懒加载和渲染页面内容的常见问题。实际上，滚动条大小和拇指位置是页面高度的百分比，以表示内容相对于页面高度的位置。当渲染额外内容时，高度会发生变化，因此拇指会跳动。我认为普通用户不会注意或在意。所以我不会担心它。 - Chris Love

Answer 1

你应该模拟设计方案的候选项。动态高度的一个后果是可变的滚动高度。

1. 重新设计页面，将内容类别分组为固定大小的列状平铺。
2. 在页面加载后解析内容以设置准确的包含内在大小。这可能不会在第一次绘制时节省25毫秒，但对于整个会话可能会节省时间。
3. 探索更好的适用于此用户级别设置的应用程序：使用屏幕外画布、洋葱皮类型的应用程序、滚动条不敏感的触摸屏。
4. 请愿W3C和浏览器供应商妥善解决这个问题。

- PartialFlavor_55KP