Вычисление расстояния между левым краем div и левым краем области просмотра для горизонтального параллакса

Question

Когда я запрашиваю левую позицию контейнера, он возвращает цифры c, даже когда я выполняю прокрутку. Это потому что не включена x-scroll? Если да, то как мне реструктурировать мой код?

jsfiddle: https://jsfiddle.net/0xcbmrjo/

И js:

const body = document.querySelector("body")
const wrapper = document.querySelector(".wrapper")
const bodyHeight = function () {
  body.style.height = wrapper.offsetWidth - (window.innerWidth - window.innerHeight) +'px'
}
bodyHeight ()
window.addEventListener ("resize", bodyHeight)

document.addEventListener("scroll", function(){
  let scroll = window.pageYOffset
  wrapper.style.left = `${-1 * scroll}px`

  const leftViewport = window.pageXOffset
  const midViewport = leftViewport + (window.innerWidth/2)

  const containers = document.querySelectorAll(".container")
  containers.forEach(container => {
    const leftContainer = container.offsetLeft
    const midContainer = leftContainer + (container.offsetWidth/2)
    const distanceToContainer = midViewport - midContainer
  })

})

Answer 1

Согласно MDN, offsetLeft считывает из свойства offsetParent, которое является «ссылкой на элемент, который является ближайшим (самым близким в иерархии содержимого) позиционированным элементом предка» (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent). В нашем случае мы перемещаем элемент .wrapper, который забирает все дочерние элементы (элементы .container), так что элементы .container сохраняют постоянное смещение относительно своего непосредственного предка, следовательно, смещения "stati c" .