Is there way to interrupt iOS scrolling using javascript?
Example 1: user is scrolling content by moving his finger through device screen. When some event happens user continue moving his finger without raising but there is no scrolling anymore.
Example 2: user initiated scrolling but stopped his finger without raising. Some event happens and scrollbar disappears.
Example 3: Momentum scrolling completely stops when some event happens.
The first case could probably be covered using the following piece of code from another question
<script type="text/javascript">
function blockMove() {
event.preventDefault() ;
}
</script>
<body ontouchmove="blockMove()">
However, it will only work on iOS 8+. As for the other two cases I'm not aware of any method to do that.
If you're talking about interrupting the iOS inertia/momentum scrolling, then I might have something for you.
First of all, you need to add fastclick.js. The lib removes the 300ms click delay on mobile devices and enables event capturing during inertia/momentum scrolling.
After including fastclick and attaching it to the body element, my code to interrupt scrolling looks like this:
scrollElement.style.overflow = 'hidden';
setTimeout(function() {
scrollElement.style.overflow = '';
}, 10);
The trick is to set overflow: hidden, which stops the inertia/momentum scrolling. Please see my fiddle for a full implementation of stop scrolling during inertia/momentum.
Related
Not being able to completely disable the two-finger swipe gesture to navigate through the browser history for a whole website is a constant annoyance to me. Up until this point, it was at least possible to prevent that behavior by calling preventDefault() on the mousewheel event.
This does not seem to be working anymore in Chrome 59.
Here is how to reproduce it:
Start the gesture somewhere on the page, then cancel it
From there on, preventDefault has no effect.
Does anyone have a solution to this?
Examples
Zenkit and Airtable both call preventDefault when you scroll inside their table view. It seems to be working at first, but as soon as the gesture was recognized and then canceled at least once (outside the table, where prevent default is not called), preventing the gesture doesn't work anymore (even inside the table). So from there on, scrolling to the left inside the table is almost impossible because it always triggers the gesture.
In Trello`s kanban view it only occurs if you're at the left or right edge of the scroller. But I guess that is because they use native scrolling while Zenkit and Airtable use css translation instead.
I tried creating an invisible scroll container on top of the content once the user starts scrolling and removing it afterwards. This reduces the problem significantly but doesn't work in all of the cases.
Example Code:
https://codepen.io/anon/pen/gRKaMX
There are 3 boxes in this pen.
The fist one scrolls natively using overflow: scroll. Here the gesture can only be triggered if scrollLeft is 0.
The second one has an event listener attached that calls preventDefault on every mousewheel event. This prevents the gesture at first but once you started it anywhere else on the page, it doesn't work anymore.
And lastly there is a third div that you can always start the gesture on.
StackOverflow wants me to inline the code as well, so here it is:
HTML:
Native Scrolling:
<div id="native-scrolling" class="box">
<div></div>
</div>
Prevent gesture by calling prevent default. Only works if you didn't start the gesture anywhere else, yet:
<div id="prevent-gesture" class="box"></div>
Just a normal div:
<div class="box"></div>
JavaScript:
$('#prevent-gesture').on('mousewheel', function (event) {
event.preventDefault();
});
CSS:
.box {
height: 100px;
width: 200px;
background: black;
}
#native-scrolling {
overflow: scroll;
}
#native-scrolling > div {
width: 200%;
height: 10px;
}
Thanks in advance,
Jesse
Edit: About the accepted answer
Restarting Chrome fixes this issue temporarily but it keeps coming back. I'm on Chrom 69 now and it still occurs.
Have you tried turning it off and on again?
See my answer on https://bugs.chromium.org/p/chromium/issues/detail?id=889846#c3
This is expected behavior on Chrome.
If you are developer, please try to use overscroll-behavior to fix it.
https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
If you are user, please try to disable overscroll swipe on MacOS
settings. See thread you provide.
https://community.airtable.com/t/triggering-back-gesture-in-chrome-on-macos-when-scrolling-to-the-left/3074/6
For event.preventDefault() is not cancellable every wheel event.
https://github.com/w3c/uievents/pull/171/commits/824a919756b4c5702a9878efd45ea5c93a2d73a3
I have made simple website surajcreator.com/indermenschen . But the problem is in mobile device while scrolling page automatically refreshes itself. It has some scripts for background image slide. I don't understand where the problem is. Please help me.
Whoever stumbles upon this question could try to suppress the touchstart and touchend events, like
document.addEventListener('touchstart', function(e) {
console.log('touchstart');
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
});
In my case it was a manual page refresh, triggered by the window resize event, as I wanted to calculate dimensions etc. Turns out the resize event might be triggered by appearing control bars on mobile devices.
I'm using iScroll for mobile-friendly scrolling, and have an odd issue. Not only am I using iScroll for the main portion of a site, but I'm also using it for popups. However, scrolling within the popup also triggers scrolling in the main site underneath.
Is there a way to prevent this kind of bubbling?
Are you asking for event.stopPropagation() (a native JS method that keeps the event from bubbling any further up into the DOM)?
Prevents further propagation of the current event.
https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation
Could you edit your question to include some code in order to give a little more context? Thx
I want to disable the bounce effect(elastic scrolling) ipad/iphone safari browser. And tried using preventing default on touchmove but that is preventing the whole scrolling. I want to be able to scroll the content but just prevent the bounce. My header and footer are fixed.
An ideas?
With Mobile Safari on iOS8 (AppleWebKit/600) you can detect if scroll bounce occurs at the top (swiping down) using the following:
window.onscroll = function() {
if (document.body.scrollTop < 0) {
// do something
}
}
I had a play to see if I could find a clean way to "interrupt" the bounce, but didn't find anything nice.
Note the window.onscroll solution won't work in UIWebView because I think the onscroll event is not fired in UIWebView, however that isn't a problem because UIWebView doesn't have bounce! You can detect if using UIWebView versus WKWebView using https://stackoverflow.com/a/30495399/436776
I was using this code to test (must clone and open fullscreen to test on iOS): http://jsbin.com/tocako/edit
I'm programming a Webpage/-Application for the iPhone. I need to scroll to a specific position after page reload, no matter where I scrolled to while using the page before.
The script I use works fine in firefox but not in mobileSafari. In contrast to firefox, mobileSafari seems to save the position I scrolled to previously and jumps there after reload, ignoring my scrollTo triggered on reload.
This is the code I use:
function scroller(){scrollTo(1000,1000);}
window.addEventListener("load",scroller, false);
It works with click-events that I trigger manually. If I click a button to trigger the scroll function than the scrolling is done.
I tried to trigger the click via a synthetic event javascript, but this does not work either.
Is there any way the scrolling can be archived on reload and/or other not explicitly user triggered events?
I did not find a solution for the actual problem which seems to be a bug. But I found a workaround. This is not to trigger the scrolling directly via an onload event but to use a setTimeout()
init(){
setTimeout(scrollTo(0, 1000), 10)
//more code
}
//more code
window.onload=init;
What about the iscroll prototype !?