scroll

project

• javascript scroll position
  var y = window.scrollY

• javascript element size
  getBoundingClidentRect().height으로 viewport 상에서의 높이를 얻을 수 있다.
  domRect = element.getBoundingClientRect();

• javascript scroll to id
  element.scrollIntoView();
element.scrollIntoView(alignToTop); // Boolean parameter
element.scrollIntoView(scrollIntoViewOptions); // Object parameter

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
https://developer.mozilla.org/ko/docs/Web/API/Element/scrollIntoView

sticky한 Nav를 scroll up-down 할 때 색상을 바꾸려고 한다.

scroll-down

window에 addEventListener로 scroll 이벤트를 지정한다.
top 변수에 스크롤 위치를 가져와서 스크롤 위치가 50보다 크면 class="active"를 nav의 classList에 추가하고, 아니면 제거한다.

top을 여러 개 지정하는 이유는 브라우저마다 지원하는 게 다르기 때문이다.

window.addEventListener('scroll', function () {
    const top = window.scrollY 
                 || window.pageYOffset 
                 || document.documentElement.scrollTop 
                 || document.body.scrollTop;
  
    top > 50 
      ? stickyNav.classList.add('active') 
      : stickyNav.classList.remove('active');
})

scroll up & down

scroll이 up 상태일 때, down 상태일 때를 oldVal와 newVal를 비교하여 구별한다.
oldVal에는 전 이벤트로 생겨난 newVal를 넣어주고,
새로 이벤트가 생기면 새로운 newVal와 값을 비교해서 결과를 보여주고 다시 oldVal에 지정한다.

let oldVal = 0;

window.addEventListener('scroll', function() {
    let newVal = window.scrollY 
                 || window.pageYOffset 
                 || document.documentElement.scrollTop 
                 || document.body.scrollTop;

    oldVal - newVal < 0 
      ? stickyNav.classList.add('active') 
      : stickyNav.classList.remove('active');

    oldVal = newVal;
})

wheel, DOMMouseScroll : scroll-up(+), scroll-down(-)

wheel 이벤트는 Firefox에서 지원되지 않지만 DOMMouseScroll 이벤트로 적용될 수 있다. 그래서 client의 브라우저가 Firefox인지 아닌지를 구별해서 다르게 사용하면 된다.
1. 브라우저 구별하기 : navigator의 userAgent로 접근해서 Firefox라는 str이 있는지 확인한다.
2. wheelEvt 변수에 브라우저를 구별해서 실제 적용할 값을 지정한다.

const isFirefox = navigator.userAgent.indexOf('Firefox') !== -1;
const wheelEvt = isFirefox ? 'DOMMouseScroll' : 'wheel';

window.addEventListener(wheelEvt, function(e) {
    let index = e.wheelDelta ? e.wheelDelta : -e.detail;

    index < 0 
      ? stickyNav.classList.add('active') 
      : stickyNav.classList.remove('active');
})