scrollHeightについて調べてみた
こんにちは、ScrollHeightって何？
普通に生活していたら、こんな小さいなことは気にならないんだけど、プログラマーってすっごいちっさいことまで気にしないといけない。
今日は、このScrollHeightについて調べてみる。
まず、Javascriptといえば、MDNのサイトを調べるのが鉄則です。
このMDNでは、Web関係の開発者向けの情報が網羅されています。
で、ここから抜粋すると。
The Element.scrollHeight read-only property is a measurement of the height of an element's content, including content not visible on the screen due to overflow.
The scrollHeight value is equal to the minimum height the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar. It includes the element's padding, but not its border or margin.
簡単に訳してみると、オーバーフローでスクリーン上で見えないコンテンツも含めた、エレメントの高さの測定結果だそうです。詳しく言うとエレメントのパディングも含まれているそうです。
また、こちらのサイトによると、ピクセルで整数のint型を返すと書いてあります。
さらに、注意深くよむと、値を四捨五入すると書いてあります。これは要注意です、。
じつはJqueryにもサイズを図る機能を持った関数があります。
InnerHeightってなんぞや
InnerHeightについては、ここで詳しく書いてありますね。書いてある内容はClientHeightと一緒ですが、気になる注意書きがありました。
- The number returned by dimensions-related APIs, including .innerHeight(), may be fractional in some cases. Code should not assume it is an integer. Also, dimensions may be incorrect when the page is zoomed by the user; browsers do not expose an API to detect this condition.
- The value reported by .innerHeight() is not guaranteed to be accurate when the element or its parent is hidden. To get an accurate value, ensure the element is visible before using .innerHeight(). jQuery will attempt to temporarily show and then re-hide an element in order to measure its dimensions, but this is unreliable and (even when accurate) can significantly impact page performance. This show-and-rehide measurement feature may be removed in a future version of jQuery.
注意書きみたいな感じで書いてあった。でも、ClientHeightを知っている人にはこっちのほうが知りたい情報なはず。で、大事なポイントは、ユーザーがブラウザをズームしちゃうと、サイズが正確に取れません。。。って書いてある。あとは、Parentが表示されてなくてもダメなんだとか。でも、100％じゃなかったら、どっちみちClientWidthとかもあてにならないらしい。
ということは、JqueryのinnerHeightとClientHeightを比較してしまうと場合によっては値が違うっていうことですね。絶対にしないようにしましょう！！
で、このブログで何が言いたいかっていうと、LineHeightを変更すると、ScrollHeightも変わってしまうっていうこと。
そして、lineheightってfontsizeと深いかかわりがあるから、もし、lineheight が12pxで、fontsizeも12pxの時に、scrollHeightがオーバーフローしていたら、値が変わることがあるみたい。
言っている意味がさっぱり分からないと思います。笑 テストしてみた結果、ある決まったWidthとheightの中でScrollheightが48pxだったとして、このLineheightが24pxだったら、2行で表示されます。でも、もしこのLineHeightを12pxに変更して、高さが一定のままだったら？どうなるか。ScrollHeightは24になるかなって思ったら25になりました。。
実は、同じ12pxでも、若干、fontsizeのほうが大きくなってるみたいなんです。これは最初に書いた、四捨五入のせいだっりします。
もし詳しいことがわかる人は、ぜひ教えてください。
