9
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

スクロール用の要素の取得にはdocument.scrollingElementを使おう

Last updated at Posted at 2017-11-08

ドキュメントのスクロールまたはスクロール位置の取得に使うべき要素はブラウザによって差異があり、SafariやChromeなどのWebKit系がbody要素を、それ以外はhtml要素を使う必要があります。が、遂にChromeがChrome 61でhtml要素派に変わりました。これによってブラウザ判定でbody要素かhtml要素かを使い分けるという処理が動かなくなりました。

Chrome Platform Status : Interoperable body/documentElement scroll behavior
https://www.chromestatus.com/feature/6386758136627200

スクロール関連の仕様はCSS Object Modelのviewモジュールで定められていて、スクロール用の要素の取得にdocument.scrollingElement属性が用意されています。ChromeではChrome 41から使えるようになっています1。結構前ですね。この属性は互換モードならbody要素を、そうでないならhtml要素を返すとなっているので、満を持して互換モードをやめたということなのだと思われます。

ということでスクロール用の要素の取得にはdocument.scrollingElement属性を使いましょう。

が、MDNによると残念ながらまだIEが対応していないようです2。なのでそのまま使うのではなく、何らかの代替手段を用意する必要があります。以下のブログによると、document.scrollingElementがあればそれを、無い場合はWebKitならbody要素、それ以外はdocument.documentElementを使うみたいなことをすれば良いようです。

Dev.Opera — Fixing the scrollTop bug
https://dev.opera.com/articles/fixing-the-scrolltop-bug/

  1. https://www.chromestatus.com/feature/4819604295647232

  2. https://developer.mozilla.org/en-US/docs/Web/API/document/scrollingElement

9
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?