overflow-x:scroll で右端までいったことを検知したい

Question

vue で書いています。
一部省略していますが、 下記クラスcontainerではoverflow-x:scroll;を指定していて中身が右端までいったかどうかを検知したいです。

      <div class="container" :id="`Ccontainer${id}`" >
        <div v-for="h in hoge" :key="h.id">
          <img :src="h">
        </div>
      </div>

下記のような感じでスクロールした量は分かるのでこのscrollLeftが0の時は左端と分かるのですが、右端はどのように取得できるでしょうか？

document.getElementById("Ccontainer57").scrollLeft

containerの横幅は画面幅によって変動します。
またdocument.getElementById("Ccontainer57").getBoundingClientRect().widthで横幅を取得できるかと思いましたがこの横幅はoverflowしていない部分の長さのようです。

どなたか分かるかたいましたらoverflow-x:scroll で右端までスクロースしたことを検知する方法をご教示いただきたいです。
よろしくお願いします。

Answer 1

Element.scrollWidthを使用すれば非表示部分も含めた要素のスクロール可能領域を取得できます。
こちらではどうでしょうか？

MDN(Element.scrollWidth)

追記

scrollWidthを組み合わせて使うという意味だったのですが言葉不足でした。

<div id='scroll'>
  <p>スクロール要素</p>
</div>

const element = document.getElementById('scroll');
const clientWidth = element.clientWidth;
const scrollWidth = element.scrollWidth;
element.onscroll = function() {
  if (scrollWidth - (clientWidth + element.scrollLeft) == 0) {
    console.log('スクロール終了');
  }
};

div {
  width: 500px;
  overflow-x: scroll;
}
p {
  width: 1000px;
  height: 100px;
}

Comments

[Hayato1201]

ご回答ありがとうございます！
試してみましたが、scrollWidthと右端までスクロールした際のscrollLeftは若干違う値でした。
右端まで行った際のscrollLeftが802
上記Ccontainer57のscrollWidthが960でした。
この違いはなんでしょうか。。。そもそもこのwidthを取得する以外の方法でも右端までスクロールされたことが検知できれば良いのですが・・・

[Hayato1201]

ありがとうございました！
おかげさまで解決しました。