[Javascript] 画面サイズとかスクロールの値に関する備忘録

時代はJavascriptが必要最低限と言っている。 PCアプリを作るのも、Webアプリを作るのも、スマホアプリを作るのも、ホームページを作るのも、どれもJavascriptでできてしまう。 他のプログラム言語は、適材適所で使われるが、Javascriptは比較的、網羅性を持っているようだ。 なので、Javascriptを学習したがる人が多いのもうなづけるし、企業がJavascriptの上級エンジニアを欲しがるのもよくわかる。 そんな理由は、全く関係なく、毎日Javascriptで勤しんでいる時に、毎回画面サイズで少し悩む事があるので、メモ書き、備忘録残し、コピペ用スニペットをブログに書いておきたいと思います。

Javascroptが画面サイズが必要になるタイミング

何が何でも、画面サイズが必要になるわけじゃないです。 次のような場合に画面サイズが必要になります。

1. ブラウザサイズに応じたコンテンツのサイズ調整などを行う場合 2. スクロールに対するアクションをする場合

画面サイズ取得ソースコード

画面の表示サイズの取得

横 : document.documentElement.offsetWidth 縦 : document.documentElement.offsetHeight

【結果】 横 : 縦 :

【注意】　スクロールバーのサイズは含みません。

スクロールサイズの取得

横 : document.scrollingElement.scrollWidth 縦 : document.scrollingElement.scrollHeight

【結果】 横 : 縦 :

htmlとbodyにheight:100%をセットしている時

cssの設定で、上記のサイズ取得が大きく変わってしまうことがあります。 おまじないのように、html,body{height:100%;}と書いている場合に、画面の表示サイズを取得すると、スクロール値も含めたサイズが返ってきます。 そんな場合は、次のように取得します。 横 : window.innerWidth 縦 : Window.innerHeight

【結果】 横 : 縦 :

スクロールの値を取得

縦 : document.scrollingElement.scrollLeft 横 : document.scrollingElement.scrollTop

【結果】 横 : 縦 :

あとがき

以後の開発でコピペできるようにしておきました。 中では解説しませんでしたが、 document.documentElementやdocument.scrollingElementは、windowと同じと考えても言いんですが、それぞれドキュメント全体とスクロールの専用要素なので、意識して使うと良いかと思います。