'Smooth / Momentum Scroll on window without a container

I'm trying to simulate the buttery scroll on mac os / ios, often referred to as "inertia scroll" or "momentum scrolling", as you're going through the page.

Everything I found so far uses a transform3d to shift your content around and they manipulate this through some easing js function.

The issue with using a transform3d is that you can't use position: sticky or position: fixed anywhere in your app, thanks to this beauty: Positions fixed doesn't work when using -webkit-transform

I'm trying to figure a less intrusive way to build the same functionality, except without the container that all of these libraries are using.

I've tried a lot of things from messing around with the existing window scroll event to emit a new one with smooth scroll, hopefully with the right inertia values, to researching a way to do this via pure css.

Does anyone know if this is even possible?

javascriptcsssmooth-scrollingmomentum


Solution 1:[1]

I'm actually going through the same thing right now, it's funny that this question popped up right as I was looking for a solution.

The only thing I found thus far is to use this: https://github.com/BCJdevelopment/butter.js

My fixed position element is the navigation bar. It becomes fixed on scroll.

So what I did was I encapsulated all my scrollable body content, after my navigation bar, in a DIV with a "button" ID.

On scroll, the navigation bar turns fixed but the rest of the content is scrollable.

<body>
    <div class="fixed-navigation-bar"> ... </div> <!-- The position fixed element -->
    <div id="butter"> <!-- The JS targets this and everything within it has smooth scrolling enabled -->
        <div class="rest-of-website-content"> ... </div>
    </div>
</body>

This works, but on Chrome the scrolling is super laggy and I'm searching for a solution with better performance.

Hope this helps at least a bit.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 luminous_dev

Related Questions