web-dev-qa-db-ja.com

ブラウザウィンドウのscrollTopを検出するためのクロスブラウザメソッド

ブラウザウィンドウのscrollTopを検出する最適なクロスブラウザ方法は何ですか？これは非常に単純なスクリプトであるため、ビルド済みのコードライブラリを使用しないことを好みます。

javascriptcross-browser
62
Hot Pastrami
function getScrollTop(){
    if(typeof pageYOffset!= 'undefined'){
        //most browsers except IE before #9
        return pageYOffset;
    }
    else{
        var B= document.body; //IE 'quirks'
        var D= document.documentElement; //IE with doctype
        D= (D.clientHeight)? D: B;
        return D.scrollTop;
    }
}

alert(getScrollTop())
88
kennebec

または次のように単純です：

var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
21
Shawn Xue

JavaScriptライブラリ全体を含めたくない場合は、1つから必要な部分を抽出できます。

たとえば、これは基本的に jQueryの実装 クロスブラウザscroll（Top | Left）です。

function getScroll(method, element) {
  // The passed in `method` value should be 'Top' or 'Left'
  method = 'scroll' + method;
  return (element == window || element == document) ? (
    self[(method == 'scrollTop') ? 'pageYOffset' : 'pageXOffset'] ||
    (browserSupportsBoxModel && document.documentElement[method]) ||
    document.body[method]
  ) : element[method];
}
getScroll('Top', element);
getScroll('Left', element);

注：上記のコードには、未定義のbrowserSupportsBoxModel変数が含まれています。 jQueryはこれを定義します 一時的にページにdivを追加し、ブラウザがボックスモデルを正しく実装しているかどうかを判断するためにいくつかの属性を測定します。ご想像のとおり、このフラグはIEをチェックします。具体的には、 互換モードのIE 6または7 をチェックします。検出はかなり複雑であるため、 browserfeaturedetection コードの他の場所。

編集：まだ推測していない場合は、これらの種類のライブラリを使用することを強くお勧めします。オーバーヘッドは、堅牢で将来性のあるコードに支払うわずかな価格であり、クロスブラウザフレームワークを使用すれば、誰もがより生産的になります。 （IEに対して頭を叩く無数の時間を費やすのとは対照的に）。

13
brianpeiris

私はwindow.scrollY || document.documentElement.scrollTop。

window.scrollYはIEを除くすべてのブラウザーを対象としています。
document.documentElement.scrollTop IEをカバーしています。

7
Jason Lydon
function getSize(method) {
  return document.documentElement[method] || document.body[method];
}
getSize("scrollTop");
5
daluege

YUI 2.8.1コードはこれを行います：

function getDocumentScrollTop(doc) 
{
   doc = doc || document;

   //doc.body.scrollTop is IE quirkmode only
   return Math.max(doc.documentElement.scrollTop, doc.body.scrollTop);
}

jQuery 1.4.2コード（人間向けに少し翻訳されている）で、適切に理解していると思います。

function getDocumentScrollTop(doc) 
{
   doc = doc || document;
   win = doc.defaultView || doc.parentWindow; //parentWindow is for IE < 9

   result = 0;
   if("pageYOffset" in win) //I'don't know why they use this, probably they tested it to be faster than doing: if(typeof win.pageYOffset !== 'undefined')
      result = win.pageYOffset;
   else
      result = (jQuery.support.boxModel && document.documentElement.scrollTop) || 
               document.body.scrollTop;

   return result;
}

残念ながら、jQuery.support.boxModelの値を抽出することはほとんど不可能です。一時的な子要素をドキュメントに追加し、jQueryと同じテストを行う必要があるためです。

2
Marco Demaio

このスレッドが更新されてからかなりの時間が経ったことを知っていますが、これは、実際にホストが機能する「scrollTop」プロパティを持つルート要素を開発者が見つけることができるように作成した関数です。テスト済みChrome 42およびMac OS X（10.9.5）のFirefox 37：

function getScrollRoot(){
    var html = document.documentElement, body = document.body,
        cacheTop = ((typeof window.pageYOffset !== "undefined") ? window.pageYOffset : null) || body.scrollTop || html.scrollTop, // cache the window's current scroll position
        root;

    html.scrollTop = body.scrollTop = cacheTop + (cacheTop > 0) ? -1 : 1;
    // find root by checking which scrollTop has a value larger than the cache.
    root = (html.scrollTop !== cacheTop) ? html : body;

    root.scrollTop = cacheTop; // restore the window's scroll position to cached value

    return root; // return the scrolling root element
}

// USAGE: when page is ready: create a global variable that calls this function.

var scrollRoot = getScrollRoot();

scrollRoot.scrollTop = 10; // set the scroll position to 10 pixels from the top
scrollRoot.scrollTop = 0; // set the scroll position to the top of the window

これがあなたのお役に立てば幸いです！乾杯。

1
ronbuck

最新のブラウザでscrollTopを取得する最良の方法は、

const scrollTop = document.scrollingElement.scrollTop

これがうまくいかない場合は、試してみることもできます

const scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop, document.scrollingElement.scrollTop)
0
John

追加のライブラリは不要です。次のスニペットを使用してください。

const scrollTop = 
    (window.pageYOffset !== undefined) ? 
     window.pageYOffset :
    (document.documentElement || document.body.parentNode || document.body).scrollTop;
0
Ci Boz

これはIE5からIE11でうまく機能します。また、すべての主要な新しいブラウザーをサポートしています。

var scrollTop = (document.documentElement && document.documentElement.scrollTop) ||
                (document.body.scrollTop) || (document.scrollingElement);
0
ExillustX