Question

我有一个用例，我必须在可滚动的div内显示元素列表。问题是列表很长，接近200个元素，并且在移动浏览器中查看时，滚动条很简陋。我在chrome dev工具中看到了很多Paints和Composite Layers，实际上我无法达到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>

点击谷歌后，我可以通过在overflow:scroll而不是div上放置body来获得黄油平滑滚动。虽然这是行得通的，但对我而言，身体卷轴比应用于内部HTML元素的卷轴更具性能并不直观。

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

与身体滚动相比，为什么可滚动div中的FPS较差？

0 个答案: