I have a scrollTop() button which, onclick, performs scroll to top action. I want to stop that action when a user touch the screen. See, When user wants to read a specific paragraph or view a video, he wants to stop the scroll top action but scrollTop() goes to top of the page and user can't stop it in middle. I used stopPropogation but it didn't work. Is there any function which can stop scroll action when user touch the screen. I think this details are enough for making a proper function.
I use the following code for scrollTop action. https://codepen.io/vkdatta27/pen/WNxGopP
Related
we have this web app that has a layer element that contain text "swipe up to enter the game", the size of this layer element is equals to the viewport width and height.when the user swipe up (or scroll down) the layer element disappears and the webpage should become fullscreen. I found out that I can use the Fullscreen API, I just need to make the function call for element.requestFullScreen() but this function call return an error if it is not called under a user gesture event. since Scroll down is not a user gesture event is it possible to do this? or are there any workaround to mimic the fullscreen functionality?
requestFullscreen() requires user activation, which means it can only be triggered by keydown, mousedown, pointerdown, pointerup, or touchend and it can't be scripted.
Refs:
https://developer.mozilla.org/en-US/docs/Web/Security/User_activation
https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen
Your best option is on scroll event, you can blackout the page and show a giant button centered in the middle of the screen that says "CLICK TO START" for desktop or "TAP TO START" for tablet/phone. WHen the user interacts with the button you can launch your app fullscreen.
I'm having a bit of a problem with mobile safari's swipe animation:
I've created a popup window of sorts, for the search functionality (with a similar purpose and look to ebay's mobile site. Go to ebay on mobile, and focus on the search field and it will overlay a sort of popup over the entire site)
The difference, however, is that I've added a pushstate command so that when you open the search popup, it advances the browser history. That way, if a user wants hits "back" on the browser, it'll just close the popup instead of going to whatever previous page the user came from.
Another thing is that I've created an animation for the window's appearance and disappearance. So when you focus on the search field, the popup appears by sliding from right to left, and also goes away in a similar fashion.
Here's the problem, though: iPhone's swiping navigation functionality destroys the sliding effect -
when you open the popup, it advances you forward in the browser's history. Now, if you try to go back by using the swiping functionality, it shows the sliding animation of the previous page into view (iPhone's default), but then, as it's done, my code kicks in (because ultimately, it triggers the popstate event) and also does the sliding animation, so it looks broken. So, as a result, the way it looks is: you swipe to go back to the previous page which shows the search popup being pushed out of the view (just like my animation), and then when you're done, boom, the animation reappears, and plays again.
Ideally, I'd like to be able to detect the swipe functionality somehow. That is, some event, or something in the popstate event to indicate that a swipe navigation is, or has just occurred?
Or perhaps, being able to disable safari's default effect? (to which the answer, I suspect, is a big fat NO)
Is there anything I could do about any of that stuff short of disabling my custom animation when I detect safari, or doing away with the pushstate functionality?
Any advice towards a solution would be highly appreciated.
In my site, list page loads all data in table rows. It keeps loading when user scrolls to the bottom of page(infinite scroll). This works fine. User can click a link from row and lands on another page on subdomain. When user clicks back button to list page, it fires scroll event and loads data. Sometime scroll event fired few time(say 3 to 5 api calls happens)
Site is built with Vuejs. I have tried few suggestion like window.onpopstate, vuejs' navigation guards. window.onpopstate doesn't work. Vuejs' beforeRouteEnter not helping. Because even before a flag is captured in beforeRouteEnter, scroll event fires.
Is there any way to stop scroll event being fired by back button click?
This is possibly what you are looking for:
if ( 'scrollRestoration' in history ) {
history.scrollRestoration = 'manual';
}
This question is purely for usability purpose.
I'm sorry if the title of the question is not very clear. It's not about how to fire an action when a page is scrolled to top (not very hard), but about how to fire an action when the user scroll to top and continuously try scrolling more (top).
The scenario is as follow: The page initially loads a list of items via AJAX and render them. If the user try to scroll up more and more and more to top (and don't stop scrolling on the top position), then a "loading newer items" action should be called.
How to make it happens?
You might think the loading more items div is above the top of the window. But what the websites are doing: they create a div on position y = 0px to let's say y = 30px. When they show the page they automaticly scroll to y=30px. So people will see the normal page, now when the user scrolls up (which is of course possible since he is on y=30px) he will see the "Loading more items" div, you can easily check if the "loading more items" div is visible in the current viewport since it is part of the page, and fire the event to load more items if so, in the callback of this function, you can scroll to y=30px again.
I have made a HTML page. This page is smaller than Iphone screen. Let's say this is login page. The page contains text input fields.
I disabled scrolling the page this way:
document.ontouchmove = function(e){
e.preventDefault();
}
That code prevents scrolling, but when I tap an input field and drag, than the page is scrolling anyway.
Is there a way to completely disable page scrolling in HTML at iPhone?
The user can always scroll to the top by touching the status bar, so the best way to prevent scrolling is to keep scrolling. Put window.scrollTo(x, y) in a setInterval, and whenever the user scroll the page you can scroll it back to the right position.
When the user click on an input field, Mobile Safari might scroll up a bit to avoid keyboard covering the input field. Make sure that you scrolling behavior won't get the input field covered by the keyboard.
It worked for me
$("body").bind("touchmove", function(e) {
e.preventDefault();
});