Subscribed unsubscribe Subscribe Subscribe

Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

【js】getBoundingClientRect() がヤバ良い(初出は2008年⁉︎( ˙◊˙◞ )◞💡 )

element.getBoundingClientRect()

この method は、document内の指定した

「❶指定要素の大きさ(縦・横幅)」

「❷viewport(後述)からの、指定要素の相対位置」

を知る事ができます。

 

 

element.getB...().width

element.getB...().height

指定要素の大きさを、このmethodで返値することができます。

element.getB...().top

element.getB...().bottom

element.getB...().left

element.getB...().right

 

viewportとは、ブラウザのウィンドウの事です。言い換えれば、今Webを観ているアプリケーションの画面全体をviewport( 視点) と言います。

位置計算にあたり、ブラウザウィンドウの左上端がviewportの基準点となり、そこからの要素の相対位置を返値します。

 

JS Bin on jsbin.com

 

f:id:DDramonQ:20161218200431p:plain

 

 

( i )Not スクロールイベント時

通常のまま getBounding...() を使った場合は、viewport がdocument の最上部にある時として値が計算されるので、documentトップから( body の一番上から )の距離になります。

 

他のWebサイトで「絶対位置」と書いていましたが誤りです。あくまでgetBounding...() は「viewport からの相対位置」です。ただし、スクロールイベントを絡めない場合は、「vieport = document Top」になるので、あたかも「ある要素の絶対位置(正確に言うと"ある要素の、document内の位置") 」のように感じますが違います。この違いは重要です。

getBounding..() だけに限らず、「そのメソッド・プロパティがどの様に値を計算しているか」を理解しておく事、言い換えれば「その仕組みの本質」を理解しておくと応用が効きます。逆にそうでなければ、応用が利きません。( これは自分にも言っています😅w)

 

 

( ii )スクロールイベント時

また、スクロールイベントと絡めて、「viewportから"その要素"が何px離れているか」をタイムリーに返値する事も出来ます。スクロールによって変化する位置を、逐一、返値してくれます。

 

See the Pen oYmNLj by Kazuma Tojo (@Kazumax) on CodePen.

 

「どれ位スクロールしたか」を知れる、という点では、element.scrollTop やwindow.scrollYとも似ています。ただ、getBoundingClientRect() は

height, width, top, left, right, bottom の6つの値を知ることができます。

 

❶height, width : 任意のブロック要素の大きさ( 縦幅・横幅 )

❷top, left, right, bottom : 任意のブロック要素の、viewportからの相対位置

 

 

一次ソース

CSSOM View Modul -W3C

∟6. Extensions to the Element Interface

https://www.w3.org/TR/cssom-view-1/#extension-to-the-element-interface

 

初出は2008年前後のようです。そんなに前からこんなに便利なものがあったとは( ˙◊˙◞ )◞💡💡✨✨

 

 

その他の分かりやすい解説

●「getBoundingClientRect method」- Dottor ---

http://help.dottoro.com/ljvmcrrn.php

●「Corrdinate system」 -JavaScript Tutoria---

https://javascript.info/tutorial/coordinates

 

 

John Resigさんが、2008年に記事を書かれていたのですが、getBounding...() は、計算処理も早いようです。また、それ以外の方法で、ブロックの(x, y) を求めるメソッドやプロパティでは、バグが含まれていたり、誤差が多いようです。

 

JohnResig 「getBoundingClientRect is Awesome」

http://ejohn.org/blog/getboundingclientrect-is-awesome/

  

何はともあれ、getBoundingClientRect() メソッドは、インタラクティブな効果を実装する際等、かなり汎用性が高そうな予感です✨(⁼̴̀ૢ꒳⁼̴́ૢ๑)♪♪

 

 

 getBoundingClientRect() の 対応ブラウザ

http://caniuse.com/#feat=getboundingclientrect

 

 

 

後日談

前回の記事でスクロールナビ.jsを少し書きましたが、あの機能を実装するのに、 getBounding...() を使っています。確認はしていませんが恐らく、他のスクロールナビもこれを使っておられると思います。

また、このブログの記事タイトル背景のパララックス効果も、getBounding...()を使っています。始めはelement.ScrollTopwindow.scrollY  を使っていたのですが、どうもタブレットからだとカクツキが多かったです(もしかしたら僕の他のコードのバクかもしれませんが😅w) そしてある時ふと思い出してgetBounding...() にした所、Resig さんのデモ動画のように、処理速度が速いようで、カクツキも無くなりました。

 

ちょっとした違いだけど、大きく差が出る。バグもそうだけど、コンピューターさんは繊細なのだと、再認識した出来事でもありました✨(⁼̴̀ૢ꒳⁼̴́ૢ๑)

 

 

 

This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️