要素の位置を取得するクラス（要素位置のイメージあり）

要素の位置を取得するためのクラスを作ってみました
ターゲットは後から設定できるようsetTarget(el)を設けています

innerHeightはわざわざ作る必要もないですが、、、

要素位置のイメージ

用例

import { GetPosition } from './_GetPosition';

class hoge {
  constructor(target) {
  this.target = document.querySelectorAll(target);
  ...
  this.GetPosition = new GetPosition();
  ...
  }
  
  fuga() {
    this.target.forEach(el => {
      this.GetPosition.setTarget(el);
      const offsetTop = this.GetPosition.getOffsetTop();
      const endPosition = this.GetPosition.getEndPosition();
      const winHeight = this.GetPosition.getWinHeight();
      ...
    });
  }

クラス

'use strict'
const { log } = console;

//要素のポジション取得クラス
export class GetPosition {
  constructor(el) {
    this.el = el; //ターゲット要素
    this.scrollTop; //現在のスクロール量
  }

  //ターゲット設定
  setTarget(el) {
    this.el = el;
  }

  //現在のスクロール量を取得
  getScrollTop() {
    return window.pageYOffset
  }

  //現在のスクロール量をthis.scrollTopに設定
  setScrollTop() {
    this.scrollTop = window.pageYOffset
  }
  
  //ターゲットの高さ
  getClientHeight() {
    return this.el.clientHeight;
  }

  //ウィンドウ高さを取得
  getWindowHeight() {
    return window.innerHeight;
  }

  /*
    ページの一番上からの位置

    getBoundingClientRect().topは画面上の相対値を返すので、
    現在のスクロール量 + 画面内の相対値」で
    ページの一番上からの位置を取得（jQueryのoffset().topと同じ）
  */
  getOffsetTop() {
    return this.getScrollTop() + this.el.getBoundingClientRect().top;
  }

  //要素の終了位置 clientHeightやinnerHeightなどサイズ取得系もリフローが発生する
  getEndPosition() {
    return this.getOffsetTop() + this.el.clientHeight;
  }
}