Geek Answers Handbook

Why are FPS inside scrollable divs worse than body scroll?

I have a use case where I have to show a list of items inside a scrollable div. The problem is that the list is long, about 200 items and when viewed in mobile browsers, the scroll is piercing. In chrome dev tools, I see a lot of Paintsand Composite Layers, and I can’t reach more than 30 frames per second. Here is a sample code -

<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>

After I worked a little, I was able to get oil smooth scrolls by putting overflow:scrollon bodyinstead of div. Although this works, it does not seem intuitive to me that body scrolling is more efficient than those that apply to internal HTML elements.

: - https://funag.imtqy.com
: https://github.com/funag/ui-core/pull/80/commits/fe4a49fd92c3ad69a054308c4f2a89351178fb99

+4

:

More articles:


All Articles