CODEWITHSUNDEEP
javascriptiphonewebkitmobile-safari
mintywalker
mintywalker

Reputation: 1595

How to find (in javascript) the current "scroll" offset in mobile safari / iphone

I'd like to know the x/y offset of the how far the user has "scrolled" within the viewport in mobile safari on the iphone.

Put another way, if I (through javascript) reloaded the current page, I'd like to find the values I'd need to pass into window.scrollTo(...) in order to reposition the document/viewport as it is currently.

window.pageXOffset always reports 0

jquery's $('body').scrollTop() always reports 0

events have a pageX, but this won't account for the scrolling of the page that happens after you release your finger if your gesture was to "flick" the page up/down. Namely, it'll give me a point when the finger leaves the screen, but that doesn't always match where the page will be after it's finished scrolling.

Any pointers?

Upvotes: 17

Views: 38123

Answers (7)

mseddon
mseddon

Reputation: 1885

If for whatever reason pageXOffset and pageYOffset fail, the solution is straightforward, but rather silly:

// force an element to top left of the page
var topLeftMarker = document.createElement("span");
topLeftMarker.style.position = "absolute";
topLeftMarker.style.left = "0";
topLeftMarker.style.top = "0";

document.body.appendChild(topLeftMarker)

function scrollOffset() {
    // getBoundingClientRect() returns the rectangle of the element in viewport space,
    // which *is* scrollLeft and scrollTop 
    const rect = topLeftMarker.getBoundingClientRect();
    return { x: rect.left, y: rect.top }
}

Upvotes: 0

dxpkumar
dxpkumar

Reputation: 371

Here is a simple code to find if the device is iphone and also to change the scroll position to specific position based on some action. I had an issue with iphone only when I click and open an image as a popup, because vertical scroll goes down than where I wanted to be. So I wrote this code and it solved the issue.

if((navigator.userAgent.match(/iPhone|iPad|iPod/i))){
    ('#tutorial-landlord').click(function(){
        window.scroll(100, 1500); // x, y (horizontal, vertical position) 
    });
}

To find the scroll position. Just go to console in chrome and write window.scrollY for vertical and see how the position changes so note that number and give it in place of x and y

Upvotes: 1

pendor
pendor

Reputation: 1790

window.pageYOffset should give you the current scroll offset. There's window.pageXOffset if you need it too.

Upvotes: 9

BishopZ
BishopZ

Reputation: 6378

This will indeed work:

var scrollX = window.pageXOffset; 
var scrollY = window.pageYOffset;

If you are viewing content in an iFrame (which is common in WebViews for instance), then you will need to add parent:

var scrollX = parent.window.pageXOffset;

Also note that these values are not writeable. So to change the scroll position, you will need to use window.scrollTo method:

var scrollX = window.pageXOffset; 
var scrollY = window.pageYOffset;
window.scrollTo(scrollX -100, scrollY -100);

Upvotes: 3

ptitgraig
ptitgraig

Reputation: 1

I had the same issue on iPad. Just desactivate the console. The viewport height changes when the console is open in Safari.

Upvotes: 0

Andrea
Andrea

Reputation: 1868

I had the same problem... this did the trick:

var scrollX = window.pageXOffset; var scrollY = window.pageYOffset;

Got it from this question: Get current position of the viewport in Mobile (iPhone) Safari

Upvotes: 3

mracoker
mracoker

Reputation: 886

Have you tried the pure js way?

document.body.scrollTop

Upvotes: 1

Related Questions