[scroll] IE window 10 Smooth scroll Option 이슈

박규태·2021년 11월 4일
0

ie

목록 보기
1/1

서론

스크롤 모션을 하면서 기존엔 position:sticky를 넣어 고정 시킨후 모션을 취하는 방식을 사용했었다.
하지만 IE는 sticky를 지원하지 않았고 대안 방법으로 디폴트는 position:relativeabsolute 를 사용하고 고정이 될때 fixed로 고정 시킨후 뷰밖으로 나가게 되면 absolute를 사용하고 translate Y 값으로 스크롤 했던 값만큼 띄어 주는 방식을 사용했다.
하지만 sticky처럼 고정이 되고 모션이 되었지만 변경 되는 값이 position이라 그래 reflow가 일어나는 건지 깜빡임 혹은 덜컹거리는 현상이 일어났었다.

그래서 sticky의 요소는 사용하지 않고 보여주는 view의 node는 fixed 로 고정을 한 후 가상의 스크롤 영역을 만들고 (fake scroll) 그 영역을 스크롤 할때 스크롤 값만큼 view를 tranlate Y로 움직이는 형식으로 프로젝트를 했었다.

이슈확인

크롬이나 사파리,파폭,모바일(안드로이드,IOS)등 문제는 없었다.
IE의 경우 가상 윈도우 window7,8로 봤을때 IE10,11 전혀 문제 없었다.
하지만 window 10으로 보는 순간 이야기가 달라졌다.

window10의 ie10,11은 다른 윈도우의 ie랑 전혀 달랐다.
스크롤을 하면 덜덜 떨려 컨텐츠를 제대로 볼수 없는 지경에 이르렀다.

구글에 검색해면서 확인해 본 결과는 window10서 부터 디폴트로 ie 인터넷 옵션으로 smooth scroll을 해주는 기능이 있는데 그 smooth해주는거 때문에 덜덜 떨림이 생겼다. 실제로 체크를 풀면 다른 윈도우 처럼 정상작동 하였다.

본론

하지만 디폴트로 체크 되어 있기 때문에 사용자에게 체크를 풀어달라 할수 없다.
테스트를 해본 도중 스크롤바로 스크롤 했을 경우 떨림이 없었다.
그 말은 wheel 이벤트로 스크롤을 했을때 문제가 된다는 것인데
바로 wheel이벤트를 막았다.

window.addEventListener('wheel', e => {
  e.preventDefault();
});

wheel을 막았으니 wheel로써 스크롤을 할수 없었다.
wheel을 할때마다 scroll을 할수 있도록 값을 주었다.

window.addEventListener('wheel', e => {
  if (ie일때) {
    e.preventDefault();
    let currentScrollOffset = window.pageYOffset;
    if (e.deltaY > 0) {
      window.scrollTo(0, currentScrollOffset + 움직일 스크롤값);
    } else {
      window.scrollTo(0, currentScrollOffset - 움직일 스크롤값);
    }
  }
});

하지만 스크롤 값만큼 띡띡 움직일수 있기에 다행히도 현재 프로젝트에서는 스크롤에 수치를 주어 해당 값만큼 window.requestanimationframe 을 사용하여 smooth하게 스크롤이 될수 있도록 처리를 해둔 상태였다.(이번 프로젝트는 gsap의 ticker를 사용하였다.)

scroll: function (callback, _ease) {
  gsap.ticker.fps(0);
  _ease = (!_ease) ? 0 : _ease;
  let esScroller = {
    ease: (1 - _ease),
    endY: 0,
    y: 0,
    scrolled: true
  }
  let rafTimeout = null;

  function esUpdate() {
    _ease = 수치값;
    esScroller.ease = (1 - _ease);

    let scrollY = window.pageYOffset;
    esScroller.endY = scrollY;
    esScroller.y += (scrollY - esScroller.y) * esScroller.ease;


    if (Math.abs(scrollY - esScroller.y) < esScroller.ease) {
      esScroller.y = scrollY;
      esScroller.scrolled = false;
      gsap.ticker.remove(esUpdate);
    }
    rafTimeout = (esScroller.scrolled) ? gsap.ticker.add(esUpdate) : null;
    if (callback) callback(esScroller.y);
  }
  return function () {
    esScroller.scrolled = true;
    if (!rafTimeout) rafTimeout = gsap.ticker.add(esUpdate);
  }
}

결과

smooth scroll에 체크가 되어 있는 상태에서 wheel로 스크롤을 하여도 덜덜 떨림이 사라졌다. 대성공이다.

Microsoft - Internet Explorer 11 freezes due scroll.

profile
PUBGYU

0개의 댓글