我在使用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>
标记内。 height
属性的用法替换为clientHeight
window.addEventListener('scroll', debounce(checkSlide));
时,在窗口加载时调用了反跳函数,因此使用了该函数的调用。当我们使用代码window.addEventListener("scroll", function(){return debounce(checkSlide);});
时,该函数将分配给该事件,并在每次该事件发生时被调用。