ちょっと内容正確性が低いです。まだ調査中。

scrollTop

よくある画面を分割して左側にメニューがあるアプリケーションにおいて、左側のメニューがたくさんあってあぶれた部分は、overflow: scroll で表示する、なんていう場合に、overflow: scroll を付与した DOM Element を取得して .scrollTop するとスクロール量が取れる。また、.scrollTop = value で指定してあげれば移動する。

scrollTop で overflow
const element = document.getElementById('area')
const scrollPosition = element.scrollTop
console.log(scrollPosition)
element.scrollTop = 200

scroll する div の中のどの位置に要素があるのか取得する

targetElement.offsetTop で、scroll する div の上から数えてどの高さに対象の element があるのか取得できる。この際注意しなくてはいけないのは、どうやら親要素を遡っていって最初に出てくる static 以外の要素を基準にとるようなので、overflow: scroll にしている div を position: relative にしないといけない。また、間に position: static 以外の要素が挟まっていてはいけないのではないか。

scroll 内にあるコンテンツが、その中で上からどの位置にあるのか取得
const targetGroup = document.getElementById('66group')
const topPos = targetGroup.offsetTop
console.log(topPos)

// 組み合わせて移動
element.scrollTop = topPos

scrollTop のスムース

ブラウザが限られるが（Chrome なら当然 OK）、CSS でスムーススクロールにできる。

scroll-behavior でスクロールできる
.leftMenu {
  width: 30%;
  background: #ffcf81;
  /* fixnakanishi 雑に高さを決めているので注意 */
  height: 85vh;
  overflow: scroll;
  position: relative;
  scroll-behavior: smooth;
}

マイクロソフトの記事

記事