[JS] 모바일 크롬브라우저 당겨서 새로고침 끄기

최근에 워드프레스 테마나 다른 원페이지 슬라이더 작업을 좀 진행 중인데 모바일 크롬 브라우저에서 아래로 당기게 되면 페이지가 새로 고침되는 경우가 있어 은근 스트레스였는데 이걸 끌 수 있는 스크립트가 있어 공유한다.

/*
prevent pull-down-to-refresh of mobile chrome
https://stackoverflow.com/a/55832568
*/
(function() {
  var touchStartHandler,
      touchMoveHandler,
      touchPoint;
  // Only needed for touch events on chrome.
  if ((window.chrome || navigator.userAgent.match("CriOS"))
      && "ontouchstart" in document.documentElement) {
      touchStartHandler = function() {
          // Only need to handle single-touch cases
          touchPoint = event.touches.length === 1 ? event.touches[0].clientY : null;
      };
      touchMoveHandler = function(event) {
          var newTouchPoint;
          // Only need to handle single-touch cases
          if (event.touches.length !== 1) {
              touchPoint = null;
              return;
          }
          // We only need to defaultPrevent when scrolling up
          newTouchPoint = event.touches[0].clientY;
          if (newTouchPoint > touchPoint) {
              event.preventDefault();
          }
          touchPoint = newTouchPoint;
      };
      document.addEventListener("touchstart", touchStartHandler, {
          passive: false
      });
      document.addEventListener("touchmove", touchMoveHandler, {
          passive: false
      });
  }
})();

위 자바스크립트 코드를 적용해주면 터치를 아래로 당겨도 새로 고침이 되지 않는다. 그리고 추가적으로 원페이지 슬라이더 환경에서 위로 터치하게 되면 페이지 하단에 흰 색이든 바운스라고 해야할까? 원하지 않느 부분이 표시될 때가 있는데 아래 css 코드르 추가해주면 이것도 보이지 않게 된다.

html {
  overflow: hidden;
}

참고 : https://stackoverflow.com/a/55832568