如何在移动 safari / iphone 中找到（在 javascript 中）当前的“滚动”偏移量

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

提问by mintywalker

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.

我想知道用户在 iphone 上的移动 safari 视口内“滚动”了多远的 x/y 偏移量。

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.

换句话说，如果我（通过 javascript）重新加载当前页面，我想找到我需要传递给 window.scrollTo(...) 的值，以便重新定位当前的文档/视口.

window.pageXOffset always reports 0

window.pageXOffset 总是报告 0

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

jquery 的 $('body').scrollTop() 总是报告 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.

事件有一个 pageX，但是如果您的手势是向上/向下“轻弹”页面，则这不会考虑在您松开手指后发生的页面滚动。也就是说，当手指离开屏幕时它会给我一个点，但这并不总是与页面滚动完成后的位置相匹配。

Any pointers?

任何指针？

回答by pendor

window.pageYOffsetshould give you the current scroll offset. There's window.pageXOffsetif you need it too.

window.pageYOffset应该给你当前的滚动偏移量。还有window.pageXOffset，如果你需要它。

回答by Andrea

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

我遇到了同样的问题……这解决了问题：

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

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

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

从这个问题得到它：Get current position of the viewport in Mobile (iPhone) Safari

回答by BishopZ

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:

如果您正在查看 iFrame 中的内容（例如在 WebViews 中很常见），那么您需要添加父项：

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:

另请注意，这些值不可写。因此，要更改滚动位置，您需要使用 window.scrollTo 方法：

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

回答by dxpkumar

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.

这是一个简单的代码，用于查找设备是否为 iphone 并根据某些操作将滚动位置更改为特定位置。仅当我单击并将图像作为弹出窗口打开时，我才遇到 iphone 问题，因为垂直滚动低于我想要的位置。所以我写了这段代码，它解决了这个问题。

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

找到滚动位置。只需转到 chrome 控制台并为垂直编写 window.scrollY 并查看位置如何变化，因此请注意该数字并用它代替 x 和 y

回答by mseddon

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

如果由于某种原因 pageXOffset 和 pageYOffset 失败，则解决方案很简单，但很愚蠢：

// 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 }
}

回答by ptitgraig

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

我在 iPad 上遇到了同样的问题。只需停用控制台即可。在 Safari 中打开控制台时，视口高度会发生变化。

回答by mracoker

Have you tried the pure js way?

你试过纯js的方式吗？

document.body.scrollTop

回答by Sagar R. Kothari

Hey ! Try to go through thislink.

嘿 ！尝试通过此链接。

or try following code.

或尝试以下代码。

[myWebView stringByEvaluatingJavaScriptFromString: @"scrollY"];

[myWebView stringByEvaluatingJavaScriptFromString: @"scrollY"];

actually - I got the answer from this question.

实际上 - 我从这个问题中得到了答案。