언어/JavaScript
[javascript30] 13 - Slide in on Scroll
홍시_코딩기록
2023. 6. 22. 22:02
https://codepen.io/hongshii0i0i/pen/LYXRBgL
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);
};
}
function scrollHandler() {
const scrollImg = document.querySelectorAll('img');
const scrollPosition = window.innerHeight + window.scrollY;
scrollImg.forEach(img => {
const imageBottom = img.offsetTop + img.height;
if(img.offsetTop < scrollPosition && window.scrollY < imageBottom) {
img.classList.add('active');
} else {
img.classList.remove('active');
}
});
}
window.addEventListener('scroll', scrollHandler);
scrollHandler부분만 내가 했다.
img가 nodeList라서 반복문을 사용했고 img란 매개변수를 imageBottom에도 사용하기 위에 반복문 안에 써줬다.