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

【问题标题】：CSS content-visibility property and strange scrollbar behaviorCSS content-visibility 属性和奇怪的滚动条行为
【发布时间】：2020-12-18 10:26:20
【问题描述】：

我查看了 Google Chrome 85 上可用的 the new CSS property 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 属性提高页面呈现性能，而不会妨碍喜欢使用鼠标滚轮拖动滚动条的用户？

【问题讨论】：

我也想知道这个。考虑沿着MutationObserver 的路线在渲染后将属性更改为content-visibility: visible，但我不确定如何在没有很好猜测的情况下设置contain-intrinsic-size
这是页面中延迟加载和呈现内容的常见问题。实际情况是滚动条的大小，拇指的位置是高度的百分比，表示内容相对于页面高度的位置。当渲染其他内容时，高度会发生变化，因此拇指会跳跃。我认为普通用户不会注意到或关心。所以我不会担心。

标签： css scrollbar

【解决方案1】：

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

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

【讨论】：