javascript - 当用户向下滚动到图像位置时，执行转换

Question

console.log 正在按预期工作，但是只有当我们到达页面底部时才会将转换添加到 img，而不是当我们距离页面底部 400 像素时。有什么我想念的吗？

let nextProjectImage = document.querySelector('.next-project-img');


zoomOutOnScroll = () => {
    let scrollHeight = document.documentElement.scrollHeight;
    let scrollPosition = window.innerHeight + window.pageYOffset;
    let distanceFromBottom = scrollHeight - scrollPosition;
    console.log(distanceFromBottom);
    if ((distanceFromBottom) < 400) {
        console.log('execute');
        nextProjectImage.style.transform = `translate3d(0px, ${-(distanceFromBottom)}, 0px`;
    }
    else {
        console.log("not close enough");
    }
}

document.addEventListener("scroll", zoomOutOnScroll);

Answer 1

问题是这样的:

${-(distanceFromBottom)}

如果您将其替换为固定/有效值，它将按预期工作。不确定你想用这个做什么，但它看起来只有在你到达底部并且这个表达式的值达到 0 之后该值才是正确的。所有“更高”的值都不是末尾带有“px”的数字，因此不应用转换。

也许是这样的？

nextProjectImage.style.transform = 'translate3d(0px, ' + -distanceFromBottom + 'px, 0px)';