我在使用classList.add javascript函数时遇到了问题。
我试图将“事件”类添加到元素上,并为这些事件类应用CSS样式。但是,它似乎不起作用,我对此很难。
有人可以帮我解决这个问题吗?
以下是我的HTML文件中的当前部分以及与该javascript对应的css部分。

部分:

<script>
    function debounce(func, wait = 20, immediate = true) {
      var timeout;
      return function() {
        var context = this, args = arguments;
        var later = function() {
          timeout = null;
          if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
      };
    }

    const sliderImages = document.querySelectorAll('.slide-in');

    function checkSlide(e) {
      sliderImages.forEach(sliderImage => {
        const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
        const imageBottom = sliderImage.offsetTop + sliderImage.height;
        const isHalfShown = slideInAt > sliderImage.offsetTop;
        const isNotScrolledPast = window.scrollY < imageBottom;

        if(isHalfShown && isNotScrolledPast) {
          sliderImage.classList.add('active');
        } else {
          sliderImage.classList.remove('active');
        }
      })
    }


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

  </script>


对应于上述javascript的CSS部分:

.slide-in {
	opacity: 0;
	transition:all .5s;
}

.align-left {
	float: left;
	/*margin-right: 20px;*/
}

.align-right {
	float: right;
	/*margin-right: 20px;*/
}

.align-left.slide-in {
	transform:translateX(-30%) scale(0.95);
}

.align-right.slide-in {
	transform:translateX(30%) scale(0.95);
}

.slide-in.active {
	opacity: 1;
	transform: translateX(0%) scale(1);
}


请帮我解决这个问题。

最佳答案

classList功能没有任何问题,相反,我对代码进行了如下所示的一些更改,

<script>
function debounce(func, wait , immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
    };
};

const sliderImages = document.querySelectorAll('.slide-in');

function checkSlide(e) {
  sliderImages.forEach(sliderImage => {
    const slideInAt = (window.scrollY + window.innerHeight) - (sliderImage.clientHeight / 2);
    const imageBottom = sliderImage.offsetTop + sliderImage.clientHeight;
    const isHalfShown = slideInAt > sliderImage.offsetTop;
    const isNotScrolledPast = window.scrollY < imageBottom;

    if(isHalfShown && isNotScrolledPast) {
      sliderImage.classList.add('active');
    } else {
      sliderImage.classList.remove('active');
    }
  })
}
var myEfficientFn = debounce(function() {checkSlide();}, 20,true);
window.addEventListener("scroll", myEfficientFn);
</script>
  • 我已将<script>标记放在<body>标记内。
  • 在checkSlide函数中,我已将height属性的用法替换为clientHeight
  • 最后,我返回了反跳函数,如代码的最后一行所示,而不是调用该函数,因为当代码类似于window.addEventListener('scroll', debounce(checkSlide));时,在窗口加载时调用了反跳函数,因此使用了该函数的调用。当我们使用代码window.addEventListener("scroll", function(){return debounce(checkSlide);});时,该函数将分配给该事件,并在每次该事件发生时被调用。
  • 10-05 20:59
    查看更多