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".
Related
I have a tricky problem with Webkit browsers and some custom scrolling behaviour.
On my page, I am detecting scroll, and when it happens, disable the scroll by making the body have overflow:hidden and then do some custom animation logic for the scroll position.
The problem on Webkit browsers (Mac OS) is when I re-enable scroll the native scroll seems to still be easing out, thus moving the page some more in the direction of the initial scroll event, which is undesirable in this case.
Is there a way to disable/reset native scroll or native scroll momentum?
Here is a codepen illustrating the problem. HOWEVER you need to download it as zip and run locally — whatever codepen is doing to the preview container prevents the "native" scroll that is causing the issue. When viewing locally and scrolling "down" what you should see in:
Firefox (the desired behaviour): For 25 frames after the scroll, the scroll position should not move, the page background should be beige. Only when scrolling again should the page animate again
Webkit: After 25 frames after the scroll, you'll see the page flicker white when the animation timeout finishes, and without scrolling anew the "old" native scroll easing seems to still be "ramping down", which triggers the scroll event, and immediately paints the page background beige again. I'd like to avoid this "old native scroll" triggering after I reenable the scrolling.
The solution was to use a different element than body as scroll wrapper. Apparently this behaviour of "resuming" momentum scrolling when re-formatting the body to be scrollable (have overflow) is hard-coded, whereas other scrollable elements do not exhibit this unpredictable side-effect.
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 have a web page which has a scroll area, and some buttons outside of the scroll area. In mobile browsers or emulated mobile mode in pc browsers, when the scroll area is auto-scrolling (after the finger swipe on the screen quickly then remove the finger from screen), I can't tap the buttons or to do anything until the scrolling is finished. I tried Chrome and Safari, they all have the same problem. Is there any way to fix this? I want to trigger the button when it's scrolling.
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)?
How do I customized iscroll.js to have 2-finger scrolling. Below is the URL for the JS library;
http://cubiq.org/iscroll-4
I want to simulate the same scrolling for 2-finger (as one gets for 1-finger)...Reason being 1-finger is used for drag action in my case..
You can't do that. iScroll 4 is designed to scroll content on touchstart (1 finger triggers it).
If you want to scroll with 2 fingers, do not use iScroll...
After checking the code of iScroll 4, it is not possible to trigger scroll with 2fingers as it is used to zoom in/out...
You can use native scroll to handle with what you want...