<div class="body">
    <div class="box" id="itemA"></div>
    <div class="box" id="itemB"></div>
    <div class="box" id="itemC"></div>
    <div class="box" id="itemD"></div>
    <div class="box" id="itemE"></div>
    <div class="box" id="itemF"></div>
</div>
.body{
  display: flex;
  width:6000px;
  background: yellow;
  height:50vh;
}
.box{
  width: 100px;
  height: 100px;
  background: skyblue;
  margin: 10px 100px;
}

#itemA{
  width: 200px;
  margin: 10px 200px;
}

#itemB{
  height: 150px;
  margin: 10px 50px;
  background: red;
}

#itemC{
  height: 50px;
  width: 150px;
  background: orange;
}

#itemD{
  height: 70px;
  width: 300px;
  margin: 10px 200px;
  opacity: .5;
}

#itemE{
  height: 150px;
  width: 150px;
  margin: 10px 150px;
  background: white;
}

#itemF{
  height: 200px;
  width: 100px;
  background: black;
  color: white;
}
const getElementRectX = (elem) => {
    let elemRect = document.getElementById(elem).getBoundingClientRect()
    return elemRect.left;
}

let RectData = {};
let idData = ["itemA","itemB","itemC","itemD","itemE","itemF"];
//TODO自動的にidを全件取得できる様にする
let result = idData.map((value) => {
    let k = value;
    let v = getElementRectX(value);
    RectData[k] = v;
  
    document.getElementById(k).innerHTML = "x：" + v;
})

console.log(RectData)

//スクロール系の関数で便利
//scrollToTop("itemB") を実行すると itemBまでスクロールできます
function scrollToTop(elem) {
  let x =  RectData[elem]
  scrollTo(x, 0);
}

//要素を中央に持っていきたい時
const centeringRect = (elem) => {
    let item = document.getElementById(elem).clientWidth;
    let x = (window.innerWidth - item) / 2
    return x
}

//scrollToTop("itemB") を実行すると itemBまでスクロールできます
function scrollToCenter(elem) {
  let itemRect =  RectData[elem]
  console.log(itemRect)
  let additionalCenteringRect = centeringRect(elem)
  console.log(additionalCenteringRect)
  let x = itemRect - additionalCenteringRect;
    console.log(x)
  scrollTo(x, 0);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.