要素がスクロールする場合、クリックで一番右に移動させたい時の横幅の取り方がわからない

Question

tableでスクロールバーが表示されるときに、ボタンをクリックすると左右に移動するようにしたいです。
左側の移動はできるのですが、右側はどうすればいいのかわかりません。横幅は表示する量によって可変になるので、pxで指定してしまうと一回のクリックで右端まで移動できなくなります。レクチャーいただければ幸いです。
※HTMLはtableではありませんが、サンプル用です

<div class="container">
  <div class="content">ボタンをクリックボタンをクリックボタンをクリックボタンをクリックボタンをクリックボタンをクリックボタンをクリックボタンをクリックボタンをクリックボタンをクリックボタンをクリック</div>
</div>

<button class="buttonleft" type="button">左へ戻る</button>
<button class="buttonright" type="button">右へ</button>

.container {
  width: 2000px;
  height: 100px;
  border: 1px solid #ccc;
  overflow-x: scroll;
}

.content {
  width: 4000px;
  background-color: #ccc;
}

const buttonright = document.querySelector('.buttonright');
const buttonleft = document.querySelector('.buttonleft');

buttonright.onclick = function () {
document.querySelector('div').scrollLeft = 1000;
};

buttonleft.onclick = function () {
document.querySelector('div').scrollLeft = 0;
};

Answer 1

scrollWidthで取得できます。

---

コード例

const buttonright = document.querySelector('.buttonright');
const buttonleft = document.querySelector('.buttonleft');
const container = document.querySelector('.container');

buttonright.onclick = function () {
  container.scrollLeft = container.scrollWidth;
};

buttonleft.onclick = function () {
  container.scrollLeft = 0;
};

Comments

[KKsall]

ありがとうございました！