모바일 웹 애플리케이션에서 나는 새로운 fancy-webkit-overflow-scrolling : touch로 스크롤 할 수있는 div가 있습니다. 유일한 문제는 스크롤이 끝날 때만 콘텐츠가 렌더링된다는 것입니다. 모바일 사파리 (그리고 안드로이드에서와 같은 다른 모바일 브라우저)가 한 손가락 스크롤 동안 HTML을 렌더링하는 방법이 있습니까?Safari의 단일 손가락 스크롤이 스크롤이 끝날 때까지 html을 렌더링하지 않습니다.
.layer-content {
position: absolute;
top: 112px;
bottom: 0;
width: 100%;
background: #e6e6e6;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
정말. 그것이 바로 iPhone이 작동하는 방식입니다. 스크롤하면 모든 리소스가 사용되어 스크롤이 매우 부드럽게 진행되며 새 파트가 표시되지 않습니다. 브라우저를 속여서 레이어를 더 크게 만들고, 더 크게 만들고, 표시하고 싶지 않은 부분 위에 레이어를 추가 할 수 있습니다.하지만 모든 레이아웃에서이 옵션이 작동하지는 않습니다. 나는 그냥 그만두겠다. 일반 페이지는 '렌더링 문제'가 동일하기 때문에 사용자는 익숙합니다.
위치 : 절대적으로 렌더링이 엉망입니다. 모바일 사파리는 스크롤이 멈출 때까지 위치 지정을위한 표준 값이없는 요소를 렌더링하지 않습니다.
위치가 자동 (기본값) 인 경우 모바일 사파리는 스크롤 할 때 요소를 렌더링합니다.
이것은 맞습니다. 레이아웃 렌더링 (정확하게 기억한다면 풀 스크롤, 타일 스크롤 등)을 처리하는 여러 가지 방법이 있습니다. position 속성을 absolute로 설정하면 레이아웃 렌더링이 느려지 게됩니다. 일부 모바일 장치에서와 동일한 문제가 발생합니다. 상자 그림자 또는 CSS 그래디언트를 사용할 때. – zvona
하드웨어 가속을 사용하여이 문제를 해결할 수 있습니다. .layer-content 내부 요소에 다음과 같은 CSS를 추가하십시오 :
-webkit-transform: translate3d(0,0,0);
난 그냥 이것을 해결 무척 확신 :
overflow-y: auto;
은 스크롤 요소에 그를 추가합니다.
(아마도 단지 overflow: auto; 필요에 따라도 작동합니다.)
별로입니다. 그것이 바로 iPhone이 작동하는 방식입니다. 스크롤하면 모든 리소스가 사용되어 스크롤이 매우 부드럽게 진행되며 새 파트가 표시되지 않습니다. 브라우저를 속여서 레이어를 더 크게 만들고, 더 크게 만들고, 표시하고 싶지 않은 부분 위에 레이어를 추가 할 수 있습니다.하지만 모든 레이아웃에서이 옵션이 작동하지는 않습니다. 나는 그냥 그만두겠다. 일반 페이지는 '렌더링 문제'가 동일하기 때문에 사용자는 익숙합니다. – Gerben
감사합니다, 개빈. 이거 맞는 데. 이 질문에 대한 답으로 귀하의 의견을 표기 할 수있는 방법이 있습니까? – FreeCandies
이제 할 수 있습니다. 아래를 참조하십시오. :-) – Gerben