CSS 内容可见性属性和奇怪的滚动条行为

Question

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

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

问题出在滚动条上。当我将滚动条从顶部拖到底部时，它有点“滞后”：光标到达屏幕底部，但滚动条仍然不在页面底部。要到达页面底部，我需要松开鼠标，将其向上移动，然后向下拖动滚动条数次。

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

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

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

Answer 1

您应该模拟设计解决方案的候选者。动态高度的结果是可变的滚动高度。

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