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