滚动条的性能问题

有人要在滚动条内写入 20000+ 条数据，嗯，我当然知道要异步加载，然而有时候条件不允许。
于是就出现了这样一幕：
在古老的系统上，IE11 浏览器下跑，没有问题， chrome77 不兼容。
在新系统上，IE11 和 chrome77 下跑，滚动条卡得要死。

原因分析

1. IE11 下之所以卡，是因为以下代码：

.e_star-edit {
    &:hover span { color:@primary; cursor:pointer;}
    span:first-child:hover ~ span { color:@fg-light-8;}
    span:first-child + span:hover ~ span { color:@fg-light-8;}
    span:first-child + span + span:hover ~ span { color:@fg-light-8;}
    span:first-child + span + span + span:hover ~ span { color:@fg-light-8;}
}

2. Chrome77 下之所以卡，它就是卡，只要是自定义的滚动条，它都卡，但可通过以下方式解决：

• 只用 body 的滚动条，但这在软件开发时，适用范围很受限。
• 在自定义滚动条上加入：position:fixed;

结论

1. 最好不要扯蛋，要加载这么多数据先骂了再说。
2. IE11 下滚动条性能确实要优于 chrome77。
3. 滚动条卡，和 CSS 有关系，但和规则数几乎没有关系。
4. 该交给 JS 的就交给 JS 处理，CSS 的奇技淫巧绕太远不是好事。