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