mobileSafari: Auto Scroll/Pan to specific position on page after reload - javascript

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 !?

Related

Interrupt iOS scrolling using JavaScript

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.

Mobile Safari: JS event for jump to last scroll position on refresh

Is there a Javascript event that I can hook into that fires when the page is refreshed, and Safari 'jumps' back to the scroll position you were at?
It's very frustrating, as the scroll event only fires on user/touch-induced scrolls, so will not fire in this case. I need to specifically find a way to bind to that event, as DOMContentLoaded, for example, fires even before that, and the window's load event would fire too late, as that will wait for all content to load.
Reason for this is that I am checking if an element is in view (using getBoundingClientRect).
Am I missing something here? As I'm not using jQuery, but vanilla JS, I have no document.ready() to try (though judging by the source code of it, I doubt it would work).
After some experimenting, it turns out that the load /onload event on the window triggers this jump in Safari Mobile (and presumably other browsers too), so binding to that event would suffice.
I hope this helps someone!

Prevent scrolling in popup window when using iScroll

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

Trigger scroll in Opera mini

How to scroll down or up to specific Y-px position in opera mini mobile browser on the page without using any 3rd libraries just pure js? Tried everything possible from scrollTo to SCrollInto View nothing works. Help please.
The scroll behavior is true as in every modern browser.
When you just open the new window/tab and don't touch screen the javascript scroll API via window.scrollTo(x,y) works fine because you did't signaled the browser where do you want to scroll.
But if you init scroll event (for example swipe) when your page loading the browser will ignore javascript scroll API for example scrollTo. And if you will refresh the page the javascript scroll API will be not work. Because it's a good practice to return user on that page place where user was before refresh.
Also hash bookmarks can scroll the page. If you set a #bookmark to the page URL, the page will scroll to bookmark until you scroll the page. And then you scroll all will be like I wrote upper: javascript scroll API will be ignored.
But there is one way to scroll in any case - manipulate with hash bookmarks:
window.scrollTo(0, 500);//will not work if the user scroll the page
location.hash = '';//reset hash
setTimeout(function () {
location.hash = 'bookmark';//will scroll to bookmark in any case
}, 1000)//remember about operamini timers limit
It works so because use must control the page, not it's code.
From the Opera doc, below the Unsupported DOM events section you will find:
As you can see, key events such as keypress and keyup are not
supported. Neither are touch and scroll events.
So scroll events are not supported in Opera Mini. See Other References

window.unbeforeunload show div IE7 problem

Currently I am developing a web application for which I am using a pre-loader icon. What I want is that the pre-loader becomes visible every time the user navigates to another page or refreshes the page. So far I have the following solution:
window.onbeforeunload = function() { $("applicationdisabler").show(); };
For Safari and Firefox it works fine when the user clicks a link or refreshes the page. However in IE7 the div only becomes visible when the user clicks a link and NOT when the user refreshes the page.
The user can refresh the page by hitting F5 (on Windows) or any other possible way the browser provided.
Of course I have been looking for some workarounds already. The following code shows the alert in IE7, but the div still doesn't become visible.
window.onbeforeunload = function() { $("applicationdisabler").show(); alert("come on!"); };
The code of my div:
<div id="applicationdisabler"><img src="images/preloader.gif" /></div>
Hopefully someone can help me out.
You need to put the # before the id on the jQuery selector:
$("#applicationdisabler").show();
Why not use just use the onLoad listener instead? Although it would be slightly slower it should be more reliable.
Actually after a bit of looking around I'm not sure modifying the DOM makes any sense unless the onBeforeUnload handler returns false first - i.e. forces the user to stay on the same page.
As I understand it the onBeforeUnload event is fired just before the page is unloaded, so if you don't return false the browser will unload the page and DOM, and any JavaScript executed after that will be pointless.
That doesn't quite explain why JavaScript isn't executed properly in the onBeforeUnload function, but from what I've seen sites only use the window.alert or window.prompt dialogs to ask the user if they want to leave the site, and then often executing JavaScript if the user decides to stay.
Hence I'm guessing that some browsers may not allow DOM manipulation when this event is fired - since if the page is unloaded any DOM manipulation done is completely pointless.
So either:
Return false in your onBeforeUnload method, and then show your preloader (although this will stop navigation to the next page)
Use the onLoad event of the next page to show the preloader image instead
Also note: Opera versions 9.5 and below do not support this event (I'm unsure about later versions) but GMail does manage to catch the back button in Opera.
Possibly related is this security warning for IE7's implementation of the onBeforeUnload event - it's possible Microsoft patched it in a way that prevents the things you're trying to do. And I know IE6 and below don't allow commands like document.location='' in the onBeforeUnload handler for security reasons.

Categories

Resources