I am currently developing a website that has some animations on scroll. The problem is that animation is triggered too fast when the user is scrolling using a touchpad. My question is: Is it possible to slow down the scrolling speed on touchpad or at least determine if user uses a mouse wheel or trackpad?
Related
When I try to get the scroll speed of a user I get inconsistent results between mac and windows.
to reproduce
Open this codesandbox
With a mouse, scroll down 1 "tick" (use a mouse that doesn't have smooth scroll)
problem
Using the exact same hardware (mouse / monitor) and browser (chrome):
on Windows I get a value of 125
on Mac I get a value of around 12
I need a way to know how fast the user scrolled that gives comparable results for all operating systems.
more context
This is for a "infinite canvas" type application (like tldraw).
I would like to "zoom out" when the user scrolls backwards and "zoom in" when the user scrolls in.
I want to use the scroll speed (and not just the scroll direction) because otherwise it feels clunky
I know that it's possible because figma can zoom in/out based on mouse wheel speed. Though they use webgl so not sure if they have access to properties that the normal wheel event doesn't have
I can't simply check if deltaY is > 100 because on mac deltaY can get over 100 when the user scrolls fast
I tried every solution from this question. None of them worked across mac/windows
I have a jquery that can show and hide advertisement on my website when ever the user is scrolling to a certain point in that page. It's working on desktop but on mobile, to make it work, I have to scroll without remove my finger from the screen. Whenever my finger is remove from the screen, then the code is no longer recognise the scroll.
My question, how to detect the scroll when my finger is off the screen but the screen is still scrolling?
$window.on('scroll', goScroll);
$(document.body).on('touchmove', goScroll);
I made a LP with scroll animations I'm really proud of. BUT it only looks good when used with a trackpad on a lap/desktop. With a mousewheel it's no longer smooth, and on a mobile devices the alignment breaks when the address bar (etc) changes the viewport height.
This is probably a common issue with animations. How do you guys handle it? Is there a best practice?
On mobile devices (or most devices with touch screens) it is possible to scroll via a fling. The scrolling then goes on (but decelerates), even when the user lifted his/her finger from the screen.
Is it possible to stop that additional scrolling with Javascript (jquery)?
I want to remove the momentum on scrollbar. I.e. when the user is not scrolling physically. The screen stop scrolling immediately.
I'm using a Mac with touchpad.
I guess this only happens when you are scrolling using scrolling gestures (two finger up/down swipe)? This is a system feature and cannot be disabled via Browser features or CSS. To turn it off go to System Preferences > Trackpad and disable Scrolling "with Intertia".