Menu
Community /Pin to ProfileBookmark
@PeterPan_321Jan 11.2019 — #@Sempervivum#1599874 Darn... I just realized the PROPER way to show CODE, and now that there's a reply I can't edit. Unless there is a "backdoor" way to edit?
Solved? Maintaining page position during orientation changes
I recently wrote a post asking how to do this, and I think I’ve found a reasonable solution. The problem is that while viewing a long page on a mobile device, some browsers will leave you at a completely different place along the page after an orientation change. Certainly my old I-phone4 has this problem, and I knew it was fixable because facebook (with it endless pages) seems to have solved it. Here is my solution, and I’d welcome any comments or improvements.
step 1: place this in your body tag:
[code:html]
<body onload=”Javascript:initListener(); onscroll=”recordScroll()” >
[/code]
Step 2: in your <head> section, either link to or include these javascript functions I’ll explain each
[code: javascript]
var topOffsetMult = 0; // global adjustment variable, updated whenever you scroll
function recordScroll()
{
try {
// get total document height. Trying to accommodate different browsers
var totPageHeight = (document.height !== undefined) ? document.height : document.body.offsetHeight;
// calculate a fractional multiplier representing current position from page top,
// 0 would be top, 1 would be the bottom
topOffsetMult = 1- ((totPageHeight – window.pageYOffset) / totPageHeight);
// test alert. Disable, because scroll event will fire many times!
// alert(“OH=” + totPageHeight + ” Yoff=” + window.pageYOffset + ” Fact=” + topOffsetMult);
}
catch(err) {;}
}
// any time the screen orientation changes, adjust the current
// scrolled position based on the previously stored fractional multiplier
function screenOrientationChg()
{
// get current total page height,
var totPageHeight = (document.height !== undefined) ? document.height : document.body;
// enable this alert if you want to see the ‘before’ and ‘after’ position
// alert(“will adjust to: ” + topOffsetMult + ” from V span =” + totPageHeight);
// correct the page position, Again, trying to accomodate different browsers.
// do I need two separate try/catches here?
document.body.scrollTop = document.documentElement.scrollTop = (totPageHeight * topOffsetMult);
}
/////////////////////////////////////////
// this is where the event listener is installed by the body/onload event.
// my variable is a crude way of ensure its not loaded twice somehow
var orientationListenrSet = 0;
function initListener() // call from body onload() and onresize()
{
// use try/catch, to ensure some browsers won’t hicup on undefined property
if (!orientationListenrSet) {
try {
window.addEventListener(‘orientationchange’, screenOrientationChg);
orientationListenrSet=1;
}
catch(err) {;}
}
}
[/code]
So at the beginning, the current screen position is ‘0’ from the top. Anytime the page is scrolled to a new position, the ‘ topOffsetMult’ variable is adjusted to a fractional number, representing 0-100% FROM the top of the screen. Be aware that the onScroll() event will typically ‘fire off’ many time during a typical scroll, even from a simple ‘page down’ key on a desktop. So if you enable the alert() there, it will be pretty annoying!
Next, any time the screen is rotated, the screenOrientationChg() function will be triggered. So it will obtain a new total page height. Thats important because a page that may have been 10000 (pixels units I guess) high in portrait, might only be 4000 high in landscape, depending on your device’s aspect ratio.
So the page top is then adjusted to a position derived by multiplying the new total page height by the previously calculated multiplier. Since the multiplier previously represented the fractional amount the page was previously scrolled to before the orientation change, it still should hold true for any screen orientation.
The result is that on the worst offender I could find (my old Iphone-4), I can see that the page position corrects pretty well after an orientation change. Its not perfect, but it seems to be accurate within about 1/2 the currently viewable page content. Note that newer mobile browsers don’t always have the problem. Enabling the ‘alert()’ in the screenOrientationChg() handler will allow you to pause before correction, so you can see the ‘before’ and ‘after’ position. But even if its not a problem for all devices, there’s nothing wrong with enhancing the site visitors experience. And some pages, particularly narrative ones where you may be telling a story, do get long enough to benefit from this.
Sign in
to post a comment3 Comments(s) ↴
0
@PeterPan_321Jan 11.2019 — #