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);
Related
I added a scroll to top button in my page when user navigates the page a bit.
And basically it works perfectly fine on desktop browser and mobile version in desktop browser. But, if tested on real mobile device the behavior is different, here if you scroll with a fast gesture the website is continued being scrolled, and if you tap on the scroll-to-top btn in that moment, it scrolls to top but all the content dissapears (cards and header) and only the full height background remains, and only after that if you scroll once more the content appears again. But if you wait after the slide gesture for the scrolling to stop and after only that press the button, it works just as it should.
EDIT: if scroll to top with behavior: "smooth" instead of auto, it fixes it
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.
I've run into a glitch in chrome on iOS where "scrolling" the screen down after an input focus causes the keyboard to obscure the bottom part of the page and a user cannot scroll down to see the elements below (this is where I have a textarea). This happens only in the iOS Chrome browser, not safari.
I'm going to walk through the steps to try and make this as clear as possible.
A user focuses the textarea input. The behavior is as expected here: the keyboard pushes the screen up.
If the user doesn't scroll at all and taps out of the input then this behavior will continue the next time they focus in the textarea (keyboard pushes the entire screen up).
If the users drags the screen down to scroll up while the textarea is focused (no matter how little they "scroll") the screen has a snap-like effect and the keyboard covers the bottom of the content. This keyboard behavior is preserved...
the keyboard continues to cover the content this way each time the user taps in and out of the textarea.
The only way I have found to reset this effect is to pull the screen up when the textarea is not focused. This causes a little flicker effect and when the user clicks into the textarea the keyboard goes back to
I have "scrolling" in quotes because there is no actual scroll happening on the page as the height, body, and form are all 100% the height of the browser. The virtual keyboard really just pushes the viewport off the screen in the first scenario.
I made a video of the issue here: https://youtu.be/yD0tjMfy5I8
I can't find any information about why this is happening and I've not had any luck trying to style the form differently because (from what I can tell) there is no way to find the height of the visible area when the keyboard is opened (window.innerHeight doesn't work)
Has anyone found a way around this glitch?
I'm using HammerJS to detect left swipes on touch screen devices. I'm trying to open a slide-out menu every time the user swipes left anywhere on the page when browsing on a touch-screen device. It works fine in portrait mode but not in landscape. I thought it might be because the direction might be changing from left to up/down, however the alert doesn't happen at all when the device is landscape. There is a fixed-position menu bar at the top of the page and it always works when swiping left on that, but not on the rest of the page. The same problem occurs on iOS Safari, and on Android Browser, Chrome, and Firefox.
I noticed on the HammerJS documentation it says "When calling Hammer() to create a simple instance, the pan and swipe recognizers are configured to only detect horizontal gestures." (http://hammerjs.github.io/recognizer-pan/). Could this be the cause of the problem? In landscape what were horizontal gestures become vertical? If so is there a workaround?
Any ideas? Thanks.
Hammer = require "hammerjs"
#body = new Hammer document.body
#body.on "panend", (e) =>
alert "panned!"
e.preventDefault()
if e.direction is Hammer.DIRECTION_LEFT
# open the menu
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)?