js Challenge day 13

scroll event

 

Code

  <script>
    const debounce = (func, wait = 20, immediate = true) => {
      let timeout;
      return (e) => {
        let context = e.target, args = [func, wait, immediate];
        let later = () => {
          timeout = null;
          if (!immediate) func.apply(context, args);
        };
        let callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
      }
    }
    const sliderImages = document.querySelectorAll('.slide-in');

    const checkSlide = () => {
      sliderImages.forEach(sliderImage => {
        // console.log(window.scrollY, window.innerHeight, sliderImage.height);
        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;
        console.log(window.scrollY, imageBottom)
        if (isHalfShown && isNotScrolledPast) {
          sliderImage.classList.add('active');
        } else {
          sliderImage.classList.remove('active');
        }
      })
    }
    window.addEventListener('scroll', debounce(checkSlide));

  </script>

 

배운 점 & 느낀 점

 

과제자체는 간단했지만 배울 것이 많았습니다.

scrollY, innerHight, offsetTop같은 속성들을 평소에 잘 안써서 까먹었는데, 이번에 다시 정리했습니다.

scollY = 스크롤 얼마 내렸는지

innerHight = 브라우저 안 화면 높이

offsetTop = 최상단에서 컨텐츠 위까지 높이

 

또한, debounce 코드를 분석하며 debounce 원리에 대해 다시한번 복습했습니다.

위 코드에서는 debounce함수를 실행하고, 20ms의 시간을 준다음 추가 함수가 생기면 시간을 더해주고, 아니라면 0의 시간을 줘서 콜백함수를 실행시킵니다.

여기서 새로알게 된것은, setTimeout이 호출된만큼 수를 리턴한다는 것을 알게되었습니다.