For those doing any sort of zooming / scrolling in...
# thinking-together
r
For those doing any sort of zooming / scrolling interface on the web. I've been discovering scroll speeds can be completely different according to os and browser 😭 https://stackoverflow.com/questions/5527601/normalizing-mousewheel-speed-across-browsers
👍 3
m
Thanks for sharing! I'll definitely look into it further but didn't notice these problems yet. My biggest issue with that was also having zoom support on touch devices
r
My users are reporting super sensitive scroll speeds on windows, making my app unusable for them. Also, hammer.js is pretty good for touch gestures if you're not onto it.
m
Yeah I know hammer. I currently implemented the handling myself though, it's not perfect but it works for now. And I am still the only user for my product.
👍 1
i
Yeah, I also rolled my own after finding Hammer too limited. The real tough one for me was getting pinch-zoom to work everywhere, including touchscreen Windows. Tricky, but I came up with something that seems to work flawlessly AFAIK. Edit: looking back at this, it seems I didn't get pinch-zoom to work everywhere after all. Ugh! But I did get... something that, in my recollection, feels at least passably good on every device I tried.
r
@Ivan Reese willing to share or is it a trade secret?
i
The code is all part of an SVG animation framework I built. All MIT, so feel free to harvest. Relevant code is here: https://github.com/cdig/svga/tree/v4-1/source/nav Main zooming/scrolling logic is in
nav.cofee
, with the other files handling each different kind of input, mapping it into the domain I care about. We support zooming/scrolling with: • 1 finger scroll and 2 finger pinch zoom on mobile • arrow keys to scroll, +/- to zoom • mouse drag to scroll, wheel to zoom • trackpad drag to scroll, 2-finger scroll to zoom • trackpad pinch-zoom in safari and FF • touchscreen windows 1-finger to scroll (can't remember if zoom is supported) • programatic control using custom GUI, etc • other stuff I'm forgetting If you want to play with a simulation that uses this framework, here's a free one on our website: https://www.lunchboxsessions.com/materials/fixed-variable-displacement-pumps/efficiency-of-different-pump-designs-simulation There's a lot of complexity in getting this to work, and it also explicitly ignores some cases we don't care about, so I'm not sure if it'll be helpful. At the very least, it's an existence proof that you can cover most kinds of input in a way that should allow everyone to scroll and zoom in a way that feels fairly comfortable. If you do end up rummaging through this code and have questions, feel free to DM me if you want to keep the noise level in this thread low.
r
@Ivan Reese Awesome, sounds like it would be super useful - thanks so much!