要素がViewportで見えるならば、知っている方法.

この記事では、ブラウザのビューポートで要素が見えるかどうかを知る方法を学びます.
起動する前に、ブラウザのエンジンに対してビューポートがどのようなものかを明確にしたいのですが.

A Viewport is the area (ordinarily rectangular) of our computer graphics (Screen) that is currently being viewed. In other words, it's the area of your computer screen that is currently visible to you (physically).

チェックするMDN docs 私の鉱山が十分でないならば、詳細な説明のために.
さて、なぜこれはあなたに役立つでしょうか?ブラウザのビューポートで要素が現在表示されているかどうかを知りたいのですが.
次のような状況で役に立つでしょう.

あなたのお客様のお客様のニュースレターを購読するには、お客様のウェブサイトのフッターにスクロールする(例えば、そのブログのサイトは、彼らはちょうど読み取りを終了することを示す可能性がありますし、購読したい場合)を表示したい

ユーザーがユーザーに見えるときに読み取るカウンタ値を増加させたい

トリガアニメーションは、例えば“セクションA”あなたのウェブページ上で表示するには、fadeinアニメーションなど

あなたはどのくらいのコンテンツは、ページ上で表示するために残っていることを指示画面の上部にある進行状況バーとして(それはあなたがブログのサイトや長いテキストコンテンツを介して読み取りを含む任意のサイトで使用されて見たかもしれない).

いくつかのJavaScriptのマジックは、ビデオを再生するように、いくつかの短いポップアップ広告を表示し、ヘルプを切り替える“ボット”🤖 など

確かに今、あなたはあなたの心の中でこれを行うことができる便利なものを見ているし、この記事の最後に、さらに洞察力とアイデアを得るでしょう.…それを始めましょう.

ウォークスルー

この関数は、DOMRect 要素のサイズとビューポートに対する位置の情報を提供するオブジェクト.
だから私たちはyourElement.getBoundingClientRect() or elementInfo = yourElement.getBoundingClientRect()

A DOMRect describes the size and position of a rectangle.

から返されるDOMRECTオブジェクトgetBoundingClientRect() は、目標値を計算するために使用できるキー値(ピクセル単位)で、パディングとボーダー幅を含む要素全体を含む最小の四角形です.
返されるオブジェクトは次のようになります.

 {
      x: 20,
      y: 5.5,
      width: 882,
      height: 198.890625,
      top: 5.5,
      right: 902,
      bottom: 204.390625,
      left: 20,
    };

説明をもっと詳しく説明しましょう.私は、混乱を避けるために、視覚的なプレゼンテーションを切り離しました.

domrect key value (ピクセル単位)

Xと左

ビューポート(ブラウザ画面)とDomrect(Yourelement)の左上の領域の間の左側からの距離を表します.

Yとトップ

ビューポート(ブラウザ画面)の上部とDomrect(Yourelement)の上部からの距離を表します.

幅

DOMRECTの幅を表す

高さ

domrectの高さを表す

The width and height properties of the DOMRect object returned by the method include the padding and border-width, not only the content width/height. In the standard box model, this would be equal to the width or height property of the element + padding + border-width. But if box-sizing: border-box is set for the element this would be directly equal to its width or height.

あなたは、チェックすることができますMDN Docs ボックスサイジング

底

ビューポート(ブラウザ画面)の上部とdomrect(yourelement)の一番下からの距離を表します.

右

ビューポートの左側からの距離、およびDomrectの右側(右下)を表します.幅が負の場合、x +幅、またはxと同じ値を持ちます.

フルダイアグラム

あなたが私がここからすべてのこれらの図をどこで得たかについて疑問に思っているならば、私はfigmaで彼らを設計しました

役に立つヒント

部分可視性の計算

要素がビューポート内で部分的に見えているかどうか知りたいと思います.そして、ページをスクロールするたびにトリガーをするevenlistnerを割り当てます.

window.addEventListener("scroll", () => {
        //Some javascript magic here...
      });

これを実現するには、単にビューポートの高さ(画面)からトップ/y値を減算し、底値が0より大きいことを確認するためのチェックも行います.
ビューポートの高さはwindow.innerHeight or document.documentElement.clientHeight しかし、通常、それはブラウザの互換性のためにそれらを結合するのがより安全ですinnerHeight and documentElement
したがって、次のように使うことができます.

const height = 
window.innerHeight || document.documentElement.clientHeight;

したがって、部分的な視認性は条件のために通過します:
viewportight - topは0より大きく、bottomは0より大きい

const viewportHeight =
            window.innerHeight || document.documentElement.clientHeight;
// condition 
(viewportHeight - top > 0 && bottom > 0)

If this is getting a little rough, it might be helpful to use the diagram and a pen and paper (I definitely did).

完全可視性の計算

今、この部分はほとんど簡単です.完全な可視性に必要な条件は以下の通りです.
bottomは0より大きく、bottomはviewportheight以下であり、topは0より大きいか等しい
このようになります.

bottom > 0 && bottom <= viewportHeight && top >= 0

この時点で、私たちは、私たちにビューを持って良いことだと思うlive website これはgetBoundingClientRect() リアルタイムで.
また、どのようにすべての条件を理解するのに役立ちます/チェックは、以前は、可視性テストをパスした.ちょうどページをスクロールし、魔法を見る.
素敵な調理と理解できるコードとそのスーパーシンプルなWebページ😎.
自由にクローン/フォークgitHub repo あなたがコードに精通したいならば.
今、私たちがこれまで行ったすべてが垂直スクロール可能な要素(スクロールトップボトム＆スクロールボトムトップ)を説明しているが、水平スクロール可能な要素(スクロール左右＆スクロール右)についてはどうですか?
ブラウザの幅を使って条件を組み合わせる必要があります.

(window.innerWidth || document.documentElement.clientWidth) 

それで、以下のようなものがあります.

(right > 0 && right <= width)

ブラウザ互換性

それは、このチュートリアルの最後に来ている.あなたがそれが役に立つと思います.あなたが参照してくださいこのポストを維持したい場合は、ブックマークしてください/ユニコーンを残してください🙂. 私はあなたがコメント/ディスカッションセクション(改善、あなたの考えなど)で何を考えるか知っている.歓声🥂.