为什么可滚动div内的FPS比身体滚动更差？

tus*_*ath 5 performance scroll google-chrome google-chrome-devtools

我有一个用例，其中必须显示可滚动对象中的元素列表div。问题在于列表很长，接近200个元素，并且在移动浏览器中查看时，滚动很乱。我看到了很多Paints，并Composite Layers在Chrome浏览器开发工具和有效的，我不能够达到30fps的相比更多。这是示例代码-

<style>
    body { 
        overflow: hidden;
    }
    .scrollable {
        overflow: scroll;
        position: absolute;
        top: 50px;
        bottom: 0;
        width: 100%;
    }

    header {
        position: fixed;
        top: 0;
        height: 50px;
        width: 100%;
    }
</style>
<body>
<header></header>

<div class='scrollable'>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>    
</body>

Run Code Online (Sandbox Code Playgroud)

稍作搜索后，我可以通过在div而不是div overflow:scroll上获得黄油状的平滑滚动body。尽管此方法行得通，但对我来说似乎并不直观，正文滚动比内部HTML元素上的滚动更高效。

真实示例：— https://funag.github.io
实际代码：https : //github.com/funag/ui-core/pull/80/commits/fe4a49fd92c3ad69a054308c4f2a89351178fbb99

归档时间：	9 年，3 月前
查看次数：	156 次
最近记录：	9 年，3 月前