"touchmove"스크롤이 고르지 않습니다

Question

휴대 기기에 "위치 : 고정"(Android가 있음)을 원했지만 존재하지 않습니다.
2 개의 div를 만들어 화면의 높이 (JS 사용)에 합산 한 높이를 작성하고 하단 div에 touch 청취자를 추가하여 위조했습니다. 이벤트는 scrollTop 값을 조정합니다. 이것은 오래된 "touchScroll.js"의 사본입니다.

스크롤링이 성공적으로 작동하며 슬링 느낌을 더했습니다. 그러나 OS가 창을 스크롤 할 때와 비교할 때 전체 스크롤이 고르지 않습니다.

난이 무덤을 해결하기 위해 -webkit-backface-visibility:hidden;과 -webkit-transform:translate3d(0,0,0); CSS 비트를 추가하기 위해 임의의 위치와 여기 어딘가에 읽었습니다. 나는 div 자체, 신체, 단지 뒷부분, 변형 등 ... 모든 순열 ... 아무 것도 도움이되지 않았습니다.

내 하나의 스크롤 내에서 내부 사업부를 만들려고하고, 대신 scrollTop 값을 조정하는 난 그냥 position:absolute하여 내부 사업부를 이동할 것 들어온다는 여전히 존재하고, 트릭 input의에 표시 내 키보드를 중지 조정하려면 top입니다. 이것은 아무런 효과가 없었다.

잘라 내기를이기는 해결책이 있습니까?
예제는 여기에 있습니다 : http://mobile.phantasyrpg.com/so-example

Answer 1

안타깝게도 해결책이 없을 수도 있습니다. 안드로이드 브라우저는 렌더링 성능이 좋지 않음으로 알려져 있습니다. 다른 Android 버전/기기/브라우저 조합은 성능 및 호환성이 다르게 표시됩니다. 예를 들어 내 Android 4.0.4 Chrome에서는 매우 원활하게 실행되지만 공장 브라우저에서는 작동하지 않을 수 있습니다.

일반적으로 변환은 하드웨어 가속화가 많기 때문에 일반적으로 항상 CSS 변환을 사용하고 다른 속성 (예 : scrollTop) 후에 만 ​​사용하십시오. (iOS 모바일 사파리 및 최신 Android 브라우저의 경우).

최신 버전의 TouchScroll 또는 iScroll은 CSS 변환을 사용하며 다른 최적화도 포함될 수 있으므로 사용하시기 바랍니다.

-webkit-transform:translate3d(0,0,0); 설정은 일반적으로 하드웨어 가속을 적용하는 데 사용되며 변경/이동중인 요소 (사례의 콘텐츠 div)에서 사용해야합니다. 그러나 새 버전의 스크롤 라이브러리를 사용하면 -webkit-transform 속성을 덮어 씁니다. -webkit-backface-visibility은 요소에 -webkit-transform도 적용되는 경우에만 적합하며, hidden으로 설정하면 원치 않는 깜박임이 해결되거나 경우에 따라 성능이 향상 될 수 있습니다.

Answer 2

-webkit-overflow-scrolling: touch; 

더 부드럽게 처리해야합니다. 구형 Android 기기에서 작동하는지 확실하지 않음