web-dev-qa-db-ja.com

モバイルサファリ/ iPhoneで現在の「スクロール」オフセットを（javascriptで）見つける方法

ユーザーがiPhoneのモバイルサファリのビューポート内で「スクロール」した距離のx/yオフセットを知りたいのですが。

言い換えると、（javascriptを介して）現在のページをリロードした場合、ドキュメント/ビューポートを現在のように再配置するために、window.scrollTo（...）に渡す必要のある値を見つけたいと思います。 。

window.pageXOffsetは常に0を報告します

jqueryの$（ 'body'）。scrollTop（）は常に0を報告します

イベントにはpageXがありますが、これは、ジェスチャがページを上下に「フリック」する場合に指を離した後に発生するページのスクロールを考慮していません。つまり、指が画面から離れたときにポイントが表示されますが、スクロールが終了した後のページの位置とは必ずしも一致しません。

ポインタはありますか？

javascriptiphonewebkitmobile-safari
16
mintywalker

window.pageYOffsetは、現在のスクロールオフセットを提供するはずです。必要に応じてwindow.pageXOffsetもあります。

8
pendor

これは確かに機能します：

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);
3
BishopZ

私は同じ問題を抱えていました...これはトリックをしました：

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

この質問から得ました： モバイル（iPhone）Safariでビューポートの現在の位置を取得します

3
Andrea

これは、デバイスが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の代わりに指定します。

1
dxpkumar

グーグル閉鎖のユーザーのために：

goog.dom.get Document Scroll

0
Ben Flynn

IPadでも同じ問題が発生しました。コンソールを非アクティブ化するだけです。 Safariでコンソールを開くと、ビューポートの高さが変わります。

0
ptitgraig

何らかの理由で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 }
}
0
mseddon

純粋なjsの方法を試しましたか？

document.body.scrollTop
0
mracoker