IOS firing multiple event cycles - javascript

I have built a carousel that disables vertical scroll if scrolling horizontally on the page, and disables horizontal scroll of the carousel if scrolling vertically on the page. This works as intended on Android but not on iOS.
I'm noticing on iOS that when I look at the dev tools (using browserstack to spoof) I'm getting multiple event cycles firing (touch start, touch move, touch end) if the user swipes. They always fire as a complete set. They all fire even if the user hasn't actually removed their finger. The longer the swipe, the more cycles of these events fire. Why is this happening? My theory is that this multi fire is the problem for why my disable scrolling functions aren't working.

Related

How to trigger wheel event on mobile

I'm trying to implement a new feature on my site, namely moving between form pages using the mouse wheel. I tried to use event "wheel" which perfectly works on desktop, however does not trigger on mobile (iphone - Safari and Chrome). I assume the mobile APIs of these browsers just do not support it, so I'm curious how to trigger it somehow.
I've tried wheel event and mousewheel as well - neither works. I'm listening along with "wheel" the event "scroll" to prevent change form pages if scroll does not reach top or bottom of the page. As I said desktop - perfect, mobile (iphone) - does not work at all.
On mobile you should listen to touch events, either touchend (if you want to move pages once the "scroll" motion is done) or touchmove (if you want to move pages during the scroll). Either way, in your event callback you can calculate if you're at the bottom of the page and then react accordingly:
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
// at bottom of page
}

Pages in qt webengineview cannot be scrolled by touch

I have a 32-bit qt program of webengineview (qt version is 5.14.2), running on a computer with win10 system, and the computer has a touch screen. At the beginning, I could zoom in and out of the page with touch gestures, and I could scroll the page, but after zooming in and out a few times, both zooming in and zooming out didn't work, and I couldn't scroll the page. But elements on the page can be clicked.
By print the events in js, both touchstart and touchmove events are received, but there is no scroll event. Under normal circumstances, a scroll event will be triggered after touchmove.
How can I fix this problem?
How is the scroll event triggered?
Why can it be triggered at the beginning, but after zooming in and out multiple times, the scroll event cannot be triggered?
I also tried it in the demo simplebrowser in qt, and this problem also exists. The phenomenon of the problem is that the webpage displayed in qwebengineview cannot scroll when the finger slides on the touch screen sometimes.
I added listener for touch-events in JavaScript,
document.addEventListener('touchstart',function (event) {
console.log('touchstart') })
document.addEventListener('touchmove',function (event) {
console.log('touchmove')})
document.addEventListener('scroll',function (event) {
console.log('scroll')})
touchstart and touchmove print when finger slides on touch screen, but scroll event doesn't print.

iOS Webkit detect swipe and drag events on scrolling element with Javascript

I have a UIWebView containing a <ul> with overflow:scroll and -webkit-overflow-scrolling: touch set.
When a user interacts with the element and the touchend event fires I want to know if this is the end of a drag/pan or the beginning of momentum scroll due to a swipe.
Is this possible?
The reason I want this is so that when the drag or momentum scroll has finished, I can line up an <li> at a certain point.
Basic setup without solution in this codepen.
I tried using Hammer js to detect swipe and pan gestures, but this stops momentum scrolling from occurring on the element as far as I can tell.

How to fix iOS 7-8 safari prevent touchmove bug?

I have found a strange bug in iOS 7-8 Safari browser.
I set preventDefault() for touchmove event for all elements on the page.
At first all looks good, but in Safari in bottom of window, where navigation bar appear, when this bar is hidden, if i try to scroll page in that place - page will scroll with ignoring preventDefault for touchmove event.
How I can fix that?
Here is a demo. I set 3 seconds delay for preventDefault(), because you need scroll page slightly down in order to navigation bar became hidden.
sanex3339.github.io/safariWTFISGOINGONo

Scroll event on Android Browser not firing. Need workaround

I've created a website with a parallax street scene. See here for an archived version.
It works just fine on all major desktop browsers, and Safari Mobile. It works fine in Mobile Firefox and Chrome for Android Beta also. However the default Android browser has issues with the scroll event. Let me be clear. Scrolling is not the issue. The div scrolls as required. The scroll event doesn't fire. This issue I experience on Honeycomb as well as ICS.
I'm not concerned about other mobile browsers because for mobile screen sizes one usually does not see the parallax scene; mediaqueries and conditional JavaScript loading take care of that. Responsive design and all that jazz.
Basically, I've written a parallise() jQuery plugin that positions each image based on its position and 'depth'. This function is bound to the scroll event.
On Android Browser, this event only fires at the start of the next touch, instead of continuously.
OK, so I thought that perhaps if I bound the function to touchstart, touchmove, and touchend events I would solve my issue. No cigar. Other touch events are also bugged. Applying the suggested workaround causes the events to fire, but as I have to e.preventDefault(), scrolling (the whole point of the exercise) is disabled.
What if I just poll the position of the stage div relative to the window div? Turns out that the position information is only updated at the start of the next touch.
I am at the end of my tether. Any help would be much appreciated.
Even if the touch events worked correctly on the bugged versions of Android, and you were then effectively able to track the native scroll position during a drag, this would be prone to error. For example, it wouldn't account for the momentum animation which happens after the touching has finished.
iOS and Android make sacrifices to improve the performance of scrolling. On both platforms, it's not possible to get the accurate scroll position until the scroll has completed. The scroll event (on the <body>) doesn't fire until the momentum animation is finished. So while your original question is about scroll events on an overflowing <div>, fixing this might not be totally helpful for you anyway.
If you want an animation to update in time with the scroll, then you need to perform the scroll programatically rather than using the browser's native scroll. The best library to do this is iScroll. You can achieve parallax effects very easily as seen in this demo.
If you need more complex effects (the walking character, in your example), you can opt for the "probe" version of iScroll which allows pixel-perfect polling of scroll position in return for reduced performance.
However, there are many downsides to using iScroll:
You may need to change your markup and styling
It is unnecessary overhead for desktop browsers, but due to markup changes may be difficult to use only as a fallback
The scrolling will not feel perfect - on iOS, with its usually excellent scrolling performance - the slight difference in momentum calculation can feel jarring. On Android, the scrolling can become more laggy than usual.
Swipe shim that doesn't need preventdefault on touchstart: https://github.com/TNT-RoX/android-swipe-shim

Categories