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

【问题标题】：How to find (in javascript) the current "scroll" offset in mobile safari / iphone如何在移动 safari / iphone 中找到（在 javascript 中）当前的“滚动”偏移量
【发布时间】：2010-03-24 10:44:28
【问题描述】：

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

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

window.pageXOffset 总是报告 0

jquery的$('body').scrollTop()总是报0

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

任何指针？

【问题讨论】：

看起来不太乐观github.com/jquery/jquery/commit/…
谷歌关闭用户：goog.dom.getDocumentScroll

标签： javascript iphone webkit mobile-safari

【解决方案1】：

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

【讨论】：

除非它在最近的测试版中有所改变，否则这是行不通的。这是我最初问题的症结所在......虽然我承认我使用的是 pageXOffset 而不是 pageYOffset。
pageYOffset 现在正在我的运输应用程序中工作。不过，我不使用 X，所以这可能会有所不同。

【解决方案2】：

我遇到了同样的问题......这成功了：

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

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

【讨论】：

【解决方案3】：

这确实可行：

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

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

var scrollX = parent.window.pageXOffset;

还要注意这些值是不可写的。所以要改变滚动位置，你需要使用 window.scrollTo 方法：

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

【讨论】：

【解决方案4】：

你试过纯js的方式吗？

document.body.scrollTop

【讨论】：

document.body.scrollTop 也不起作用。它可以在桌面版 Safari 中运行，但不能在移动版 Safari 中运行 - 它总是报告 0。

【解决方案5】：

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

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

找到滚动位置。只需在 chrome 中进入控制台并编写 window.scrollY 表示垂直并查看位置如何变化，因此请记下该数字并将其代替 x 和 y

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

如果由于某种原因 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 }
}

【讨论】：