[javascript30] 13 - Slide in on Scroll

https://codepen.io/hongshii0i0i/pen/LYXRBgL

javascript30 scroll event

 

스크롤을 내리면 사진이 옆에서 나왔다가 사라지는 이벤트 

    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에도 사용하기 위에 반복문 안에 써줬다.