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

问题描述

我查看了the new CSS property content-visibility可以在Google Chrome 85上使用，并将其添加到样式表中以改善网站上的呈现性能：

.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属性提高页面渲染性能，而又不会妨碍喜欢使用鼠标滚轮拖动滚动条的用户呢？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）