webkit scroll freeze 이슈

 

문제

ios에서 스크롤의 맨 위나 아래에서 각각 스크롤업이나 다운시 스크롤이 freezing 되는 현상

해결 방법

이벤트끼리 충돌나서 생기는 문제라 그냥 touchstart, touchmove에 대한 listener 몇 개 추가하고 에러가 생기는 케이스들에 event.preventDefault() 하여 이벤트를 막았음

 

var lastY = 0;
var targetElt = document.querySelector(".scroller");

targetElt.addEventListener('touchstart', function(event) {
    lastY = event.touches[0].clientY;
});

targetElt.addEventListener('touchmove', function(event) {
    var top = event.touches[0].clientY;

    var scrollTop = event.currentTarget.scrollTop;
    var maxScrollTop = event.currentTarget.scrollHeight -
        $(event.currentTarget).outerHeight();
    var direction = lastY - top < 0 ? 'up' : 'down';

    if (
        event.cancelable && (
            (scrollTop <= 0 && direction === 'up') ||
            (scrollTop >= maxScrollTop && direction === 'down')
        )
    )
      event.preventDefault();

    lastY = top;
});

 

정리

위로 스크롤하는데 scrollTop이 0보다 작거나, 아래로 스크롤하는데 스크롤이 최대 스크롤보다 클 때
preventDefault()로 이벤트 막기

 

 

출처 : https://stackoverflow.com/questions/39692337/div-scrolling-freezes-sometimes-if-i-use-webkit-overflow-scrolling

Div scrolling freezes sometimes if I use -webkit-overflow-scrolling

---

 

다른 방법으로는 그냥 앱 개발자분이 ios 바운스 없애주니까 해결됨 -.- (이게 베스트같음)