当我查询容器的左侧位置时，即使在滚动时它也会返回静态数字。这是因为没有启用 x 滚动吗？如果是这样，我应该如何重构我的代码？
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
})
})
最佳答案
根据 MDN，offsetLeft 从 offsetParent 属性读取，该属性是“对最接近(包含层次结构中最近的)定位祖先元素的元素的引用” “(https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent)。在我们的例子中，我们重新定位 .wrapper 元素，它携带所有子元素(.container 元素)，以便 .container 元素相对于其直接祖先保持恒定的偏移量，因此是“静态”偏移量。
关于javascript - 计算 div 左边缘与视口(viewport)左边缘之间的水平视差距离，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60173121/