Mobile Web

Scroll

EventListenerOptions 의 passive 옵션

• true일 경우 이 수신기 내에서 preventDefault()를 절대 호출하지 않을 것임을 나타내는 불리언 값
• 이 값이 true인데 수신기가 preventDefault()를 호출하면, 사용자 에이전트는 콘솔에 경고를 출력하고 이 외에 아무런 동작을 하지 않는다. 명시하지 않을 경우 기본 값은 false이다.
• passive가 false인 것은 브라우저가 스크롤링을 처리하려고 시도하는 동안 터치 이벤트 및 휠 이벤트를 처리하는 이벤트 리스너가 브라우저 메인 스레드를 차단할 가능성을 도입한다. 이 문제를 방지하기 위하여, Safari 와 IE를 제외한 브라우저에서 window, document, document.body와 같은 도큐먼트 레벨 노드의 wheel, mousewheel, touchstart, touchmove 이벤트에서 기본 값은 true이다. 그러면 이벤트 리스너가 이벤트를 취소할 수 없으므로 사용자가 스크롤하는 동안 페이지 렌더링을 차단할 수 없다. 모든 브라우저에서 passive옵션이 항상 false 여야한다면 passive:fasle값을 명시해줘야 한다. 기본적인 scroll 이벤트에서는 passive값을 신경쓰지 않아도 된다.
• 현재 대부분의 케이스에서 이미 기본값으로 최적화되고 있어 실제로 이 옵션을 조작할 일이 없을 수 있지만,
  그렇지 않은 경우 passive:true 속성을 적용 하자.
• https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
• Does not use passive listeners to improve scrolling performance
  현대 브라우저들은 touchstart, touchmove 이벤트 리스너를 가진다. 이는 scrolling events와 연관이 있다. 아래 코드 작성 시 터치시 발생하는 기본 스크롤 동작을 막을 수 있다.

  document.addEventListener("touchstart", function (e) {
    console.log("hi");
    e.preventDefault();
  });

  이러한 이유 때문에 브라우저는 이벤트 리스너 로직이 끝나기를 기다리고나서야 실제 페이지 스크롤을 한다.
  아래와 같이 passive:true이면 e.preventDefault()를 무시하고 스크롤이 바로 동작한다.

  document.addEventListener(
    "touchstart",
    function (e) {
      console.log("hi");
      e.preventDefault();
    },
    { passive: true }
  );

• 참고 : https://velog.io/@jinic/javascript-event ( passive속성이 true일 경우에는 preventDefault를 이용하여 scroll 이벤트를 막지 않겠다고 브라우저에게 이야기하는 것과 같음 )
• https://velog.io/@sejinkim/Passive-Event-Listeners

스크롤동작 시 :hover 스타일 막기

• https://stackoverflow.com/questions/27681404/how-to-disable-hover-when-scrolling-on-mobile
• https://stackoverflow.com/questions/3038898/ipad-iphone-hover-problem-causes-the-user-to-double-click-a-link

Debug

Is it possible to open developer tools console in Chrome on Android phone?
https://stackoverflow.com/questions/37256331/is-it-possible-to-open-developer-tools-console-in-chrome-on-android-phone