知り合いに聞かれて気づいたんですが、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 | ✅ |
試してみたい方はこちらをどうぞ。