javascript - iOS 웹 측의 스크롤 페이지가 고정되어 있습니다.

Question

현상:
iphone6 ​​​​, iphone7 plus, iphone6s plus를 사용하면 위로 당겨서 제품 페이지를 검색합니다. 페이지는 20개의 제품마다 한 페이지를 표시합니다. 끝에 도달하면 위로 당겨서 다음 페이지의 제품 데이터를 로드합니다. . 상황에 따라 일정 수의 페이지를 슬라이드한 후 때때로 페이지가 끈적해져 슬라이드할 수 없는 경우가 있습니다. 이런 일이 매번 발생하는 것은 아닙니다.

이 페이지는 React.js를 사용하여 구성된 단일 페이지 애플리케이션입니다.

질문:
문제의 위치가 조금 불분명합니다
(1) 현재 상황으로 볼 때 이 문제는 Android 측에서는 발생하지 않습니다. 이 문제는 iOS 측에서만 발생하는 것입니까? 문제가 있습니까?
(2) 이 상황은 특정 수의 페이지를 넘긴 후에 발생하지만 그럴 가능성은 거의 없습니다.
(3) 스크롤 페이지 돔의 구성은 p+p로 이루어집니다. , 스크롤 페이지 DOM을 구성하는 p + ul + li와 같은 인기 있는 태그를 통해 수행되지 않습니다. p + p를 사용하는 데 숨겨진 문제가 있습니까? (4) 페이지를 렌더링하기 위해 반응이 부적절합니까? 자바스크립트 처리로 인해 발생한 상황인가요?

위의 문제를 겪고 해결했다면 도움을 주세요.

Answer 1

이 상황은 -webkit-overflow-scrolling:touch 속성을 사용하여 발생해야 합니다. Webview는 렌더링을 위해 이 속성이 추가된 요소에 레이어를 추가합니다. 그러나 이 속성을 사용하지 않으면 페이지가 매끄럽지 않게 되기 때문에 현재 해결책은 -webkit-overflow-scrolling:touch 속성이 필요하지 않은 transfrom 플러그인을 사용하여 스크롤을 시뮬레이션하는 것입니다. 큰 성능 문제와 프레임 정지가 있다는 것

Answer 2

-webkit-overflow-scrolling:touch는 이 속성에 문제가 있습니다. 제 해결책은 이를 제거하고 본문과 함께 제공되는 스크롤 막대를 사용하는 것입니다