자바 스크립트 스크롤 기반 애니메이션이 모바일에서 고르지 않습니다.

Question

2 개의 div (왼쪽 및 오른쪽)가 있고 오른쪽을 기준으로 왼쪽으로 스크롤하고 싶습니다. https://jsfiddle.net/3jdsazhg/2/

이 바탕 화면에 잘 작동하지만 내가 모바일로 변경할 때, 그것은 더 이상 부드러운 아니에요 ... 이

_left.style.top = _content.scrollTop + 'px'; 

에

_left.style.top = _content.scrollTop - (_content.scrollTop * ratioLeftRight) + 'px'; 

을 변경하여 아주 쉽게 발견 할 수있다

고정 위치 그룹으로 사용해야하는 곳

1. 이것이 왜 부드럽지 않은지 정확한 이유를 알고 싶습니다 ... 애니메이션이 아니라는 것을 압니다. div의 간단한 애니메이션이 매끄럽습니다. 스크롤을 기반으로 할 때 문제가 발생합니다.
2. 이 애니메이션을 어떻게 부드럽게 만들 수 있습니까?

Answer 1

나는 결국 해결책을 생각할 수있었습니다.

필자는 모바일 뷰가 스크롤 이벤트를 덜 자주 발생시키고 래퍼를 스크롤하기 때문에 처음에는 전체 페이지를 스크롤 한 다음 왼쪽 부분을 js로 스크롤하고 다른 부분은 스크롤하기 때문에 데스크톱 버전에서이 문제가 표시됩니다.

해결책은 왼쪽을 고정 위치로 변경하고 추가하는 대신 상단에서 빼는 것입니다.

_left.style.top = -(_content.scrollTop * ratioLeftRight) + 'px'; 

Answer 2

스크롤이 끊어지기 때문에 고르지 만 실제로는 사용자가 스크롤하는 동안 IOS 모바일이 자바 스크립트 실행을 일시 중지한다는 사실을 알고 있습니다.

대신 간격을 사용하는 것이 좋을 것입니다. 각 간격 사이의 시간을 미세 조정하여 사용 사례에 도움이 될 수 있습니다.

스크롤 이벤트를 사용할 때마다이 로직을 X 밀리 초마다 실행하는 것이 집중적으로 보일 수도 있지만, 초당 수 백 번씩 이벤트를 발생시킬 수 있습니다.이 이벤트는 사용자에게 매우 집중적이고 눈에 띄는 이벤트입니다. 제한 처리 능력을 가진 장치.

(function() { 
    var interval = null, 

     //Currently set at 0.4 seconds, play with the code 
     //and change this value to see what works best for 
     //this use-case 
     time_between_interval = 400; 

    setInterval(scrollLogic, time_between_interval); 

    function scrollLogic() { 
     //The function body of what you're assigning 
     //to the scroll event. 
    } 

    //I have omitted clearing the interval but you would want to do that, perhaps on page change, or something. 

    //clearInterval(interval); 
})();