"# JavaScript 30" 강의 - 13. Slide in on Scroll

학습일자

2020.10.20

 

학습내용

- 'debounce' function

 : 불필요하게 너무 많이 event에 의한 callback function이 호출되는 경우, 적정 수준으로 조절하기 위한 함수이고, 대상callback function을 괄호로 감싸 사용 

 

- window.scrollY 

 : 읽기 전용 속성, 문서가 수직으로 얼마나 스크롤됐는지 픽셀 단위로 반환/ 최신 브라우저에서는 값의 정밀도가 픽셀보다 작으므로 반드시 정숫값을 반환하는건 아님

: stackoverflow.com/questions/41576287/why-window-scrolly-element-getboundingclientrect-top-is-not-equal-to-element

Why window.scrollY + element.getBoundingClientRect().top is not equal to element.offsetTop?

- 윈도우 창크기 

: innerheight, innerwidth  

: sometimes-n.tistory.com/22

[javascript] 윈도우 창 크기 (window.outerWidth, window.outerHeight, window.outerHeight, window.innerWidth, innerHeight)

 

알게된 점

- debounce function은 callback fucntion을 실행하기 위한 scroll 이벤트처럼 불필요하게 과도한 많은 이벤트 발생 시, 적정 수준으로 제어하기 위한 목적으로 활용

- 윈도우 창 크기에 대한 속성을 정확히 알아야 관련 효과 및 배치를 자유롭게 할 수 있음

 

 

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() {
      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('active');
        } else {
          sliderImage.classList.remove('active');
        }
      });
    }

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