知り合いに聞かれて気づいたんですが、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 ✅

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

参考