html 滚动条自动滑动,html – 当使用overflow-y时,减少滚动滑动：scroll;

我有一个2列布局,右边的列是一个可滚动的结果列表,最多可以有200个项目结果(基本上只有一个带有overflow-y：scroll; set的ul)

我所发现的是,当您滚动时,右侧的列会导致一些jank(在低端硬件上尤其明显).

在chrome时间轴中,我可以在滚动列时看到一些主要的“更新图层树”.

有什么办法可以弄清楚为什么“更新图层树”是如此漫长,什么CSS属性影响速度最多？

当我点击它 – 只是给我的信息,它运行了多长时间,没有别的.

我在每个li中都有一些CSS,效果不好(例如,过滤器,转换,box-shadows等)

如果我逐个删除每个SASS文件,它可以提高滚动性能(并且一旦我删除所有的CSS,最终会删除jank),但显然很难指出哪些CSS属性不执行此操作.

我想知道如果我在chrome时间表中缺少可以在这方面有帮助的内容吗？

我试图使用意志变化的CSS属性来促进滚动到不同的层/强制硬件加速 – 但这并没有太大的区别.

此外,我滚动时没有执行JavaScript事件.

限制不到200个项目不是一个选择.

真正有趣的是,如果我删除overflow-y：scroll; (在.map-search__结果在上面的例子中)滚动变得非常顺利并且jank消失了 – 为什么这么多效果？

这是chrome时间轴(基本上只是长的“更新图层树”部分)：

固定：

“Add will-change: transform;. Once added, the “repaints on scroll” rect is gone.”

但是要小心,因为它永远不会总是应用,根据你的代码库,检查滚动性能问题指标,以确保“重绘滚动”是关闭的,对于我,我也必须禁用-webkit-clip-path属性(在我的实际的代码库 – 不在演示版本中提供),这是在其中一个子div中设置的,请参阅：