[ie11] 스크롤 이벤트가 안 먹혀요 scrollY (X) → pageYOffset (O)

가장 빈번하게 오는 디자인 요청사항 중 하나가 바로 "스크롤 시 GNB 색상을 바꿔주세요!" 이다. 보통 처음에는 투명색이었다가 스크롤 시 컨텐츠와 구분이 되도록 GNB에 배경색을 채워 넣는 형태이다. IE 에서 테스트 하는데 제대로 동작이 되지 않아서 원인을 찾아봤더니 scrollY의 호환성 이슈였다.

Sample Code

let last_known_scroll_position = 0;
let ticking = false;

function doSomething(scroll_pos) {
  if(scroll_pos > 10) {
    document.querySelector('.nav').classList.add('is-scroll');
  }
  else {
    document.querySelector('.nav').classList.remove('is-scroll');
  }
}

window.addEventListener('scroll', function(e) {
  last_known_scroll_position = window.pageYOffset;

  if (!ticking) {
    window.requestAnimationFrame(function() {
      doSomething(last_known_scroll_position);
      ticking = false;
    });

    ticking = true;
  }
});

Window.scrollY

pageYOffset 속성은 scrollY 의 다른 이름입니다.

window.pageYOffset === window.scrollY; // 항상 true

 

브라우저간 호환성을 위해서는 window.scrollY 대신 window.pageYOffset 을 사용하세요. 이에 더해, Internet Explorer 9 미만의 구형 환경에서는 두 속성 모두 지원하지 않으므로 또 다른 비표준 속성을 사용해야 합니다. 다음은 완벽히 호환되는 코드의 예시입니다.

var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

Window.scrollY

scrollY 는 IE 에서 호환되지 않으나, pageYOffset 을 사용하면 IE9-11 에서 호환이 된다.

 

 

Window.pageYOffset

Window.pageYOffset