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