How do we fix disproportional scroll speed when CSS transform scale is applied?

1

For example, in this fiddle the body is a scroll container and the body is also scaled by 4, which makes scrolling seems to be faster:

https://jsfiddle.net/trusktr/cuthrn92/13/

And in this fiddle, the body (the scroll container) is scaled to 0.25 which makes the scroll seems to be too slow:

https://jsfiddle.net/trusktr/cuthrn92/14/

Of course, the scrolling is the same relative to the body’s coordinate system, but the scrolling is not the same relative to the screen.

This means that when using your finger to scroll, the content does not move at the speed of your finger.

Any idea how we can make the scrolling move at finger speed like when scrolling in a non-transformed container?

2

Alright, I came up with an almost-there solution: https://jsfiddle.net/trusktr/cuthrn92/62/

Try changing the scale value in the JS window to any value, then scroll speed will always be the same (pretend the green border is not there, which is for reference. The green still moves faster or slower, but the pink area moves the same as if nothing were scaled).

But the problem you’ll notice while scrolling is that the scroll bar will move slower and slower as you get to the end, because the scrollHeight of the body is dynamically changing.

I would need to somehow (???)_ calculate what the final scroll height of the body will be so that I can see the .wrapper container to that height ahead of time, that way we get a smooth scroll bar.

Also, if you press cmd+down in macOS (scroll all the way to the end in one go) then it won’t actually scroll all the way to the end because at the time you press that the scrollHeight will not yet be its full value, so it will go to the value it currently knows.

Any ideas how to pre-calculate the total height needed for the wrapper? I think it involves some crazy maths.

This is my first try, but obviously I realized it didn’t work (bottom of the JS): https://jsfiddle.net/trusktr/cuthrn92/64