Question

我在线阅读了一个教程，经过一些尝试和研究后，这个让我感到难过。基本上，当用户向下滚动页面时，当图像在距其底部高度的约50％处达到峰值时，应该出现图像。

然而，我的图像都没有出现？在代码中，当我遍历每个图像以从底部找到它的高度时，以及console.log它显示我的位置没有问题。

 const slideInAt = (window.scrollY + window.innerHeight);

当我尝试将图像的高度分成两半时，console.log显示 NaN 。

const slideInAt = (window.scrollY + window.innerHeight) -
  sliderImage.height / 2;

我不确定是否会阻止图像显示？以下是我所指的代码的完整部分。

const sliderImages = document.querySelectorAll('.animation-element');

function checkSlide(e) {
  sliderImages.forEach(sliderImage => {
// half way through the image
const slideInAt = (window.scrollY + window.innerHeight) -
  sliderImage.height / 2;
// bottom of the image
const imageBottom = sliderImage.offsetTop + sliderImage.height;
const isHalfShown = slideInAt > sliderImage.offsetTop;
const isNotScrolledPast = window.scrollY < imageBottom;
if (isHalfShown && isNotScrolledPast) {
  sliderImage.classList.add('in-view');
} else {
  sliderImage.classList.remove('in-view');
}

}）; }

window.addEventListener('scroll', debounce(checkSlide));

当我在devTools中向上和向下滚动时，循环也始终显示 false 。

如果我没有正确解释，仍在学习，我表示歉意。以下是JSFiddle

中代码的简化版本

提前致谢！

Answer 1

你试图获得div的高度，而不是图像：

function checkSlide(e) {
  sliderImages.forEach(sliderImage => {
    // get the height of the image, not the div
    const height =  sliderImage.querySelector("img").height;
    const slideInAt = (window.scrollY + window.innerHeight) -
      height / 2;
    debugger;
    // bottom of the image
    const imageBottom = sliderImage.offsetTop + height;
    const isHalfShown = slideInAt > sliderImage.offsetTop;
    const isNotScrolledPast = window.scrollY < imageBottom;
    if (isHalfShown && isNotScrolledPast) {
      sliderImage.classList.add('in-view');
    } else {
      sliderImage.classList.remove('in-view');
    }
  });
}

https://jsfiddle.net/5eog6z42/2/

向下滚动页面时不显示图像（Javascript）

1 个答案: