※スマホ対応はしてません。

タグ: documentElement

新しいChromeでスクロールが取れない? scrollingElement?

カテゴリー: JavaScript

知り合いに聞かれて気づいたんですが、Google Chromeのv61からスクロールの取得方法が変わったっぽい。とりあえずこんなコードで取れます。

var top = document.documentElement.scrollTop || document.body.scrollTop

なんだこれ

Chrome 60までとか未対応のやつは document.documentElement.scrollTop が常に 0 を返すので、 || で繋げてやるとどっちに対応してる環境でも動きます。

事前にUAから分岐して要素を分けて、みたいなことしてると駄目なので、こっちがおすすめです。そんなに実行コストかからんでしょ。知らんけど。

Chromeは変わったけどSafariはまだ変わってないので、対応しときましょう。

あとEdgeも document.body の方みたい。IEは document.documentElement だったのに。はしごを外されちゃったね。

scrollingElement なるものが

で、ちらちら見てたら scrollingElement というものがあるらしい。Safariもこいつに対応してるけど、IEは対応してない。(Edgeはいける。) IEを無視できるならこれで一発ですね。

var top = document.documentElement.scrollTop;

らくちん~。

(まだMDNに日本語版がない。これは翻訳チャンスだ。)

対応まとめ

環境 scrollingElement documentElement body
Firefox ✅ ✅ 0
Chrome 61 ✅ ✅ 0
Chrome 60 ✅ 0 ✅
Safari ✅ 0 ✅
IE undefined ✅ 0
Edge ✅ 0 ✅

試してみたい方はこちらをどうぞ。

参考

JavaScriptで要素を検索せずに取得する方法があります。(JavaScriptおれおれAdvent Calendar 2013 – 03日目)

カテゴリー: JavaScript

JavaScriptおれおれAdvent Calendar 2013の3日目の記事です。

何か要素に対する処理を行う場合はdocument.querySelector()あたりで検索してくるのですが、一部の要素については事前に取得済みだったりします。

<body>を取るならdocument.bodyで

document.bodyには最初から</body><body>要素が格納されています。個人的にはHTMLElementのインターフェイスを確認するために適当な要素を得る際にこれを使っていたりします。

同様に<head>要素もdocument.headで得る事が出来ます。この二者はHTMLの構文的にも必ず存在するため、事前に確保されているのでしょう。(ちなみにHTMLの文法的には、この二者のタグは省略可能です。その場合でも記述が省略されただけで実際はあるものとして扱われます。)

(さらに…)