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

console.log的工作正常，但是仅当我们到达页面底部时才将转换添加到img中，而不是距页面底部400px时才添加。我有什么想念的吗？

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);

最佳答案

问题是这样的：

${-(distanceFromBottom)}

如果将其替换为固定/有效值，它将按预期工作。不确定要执行的操作，但是看起来只有在到达底部并且该表达式的值达到0时，该值才是正确的。所有“较高”值都不是以“ px”结尾的数字，因此不应用转换。

也许是这样的吗？

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