-webkit-오버 플로우 스크롤 :

Question

대형 콘텐츠를 스크롤 DIV 안에 넣을 때 행의 수천이 끊어지고 있었다있는 테이블처럼 폭을 지정할 때 터치, 많은 내용이 차단됩니다 (참조 css, ios, iPad, -webkit-overflow-scrolling: touch bug, large content gets cut off)

<div class="longList"> 
    <!-- table with thousands of rows --> 
</div> 

CSS는 :

.longList {overflow: auto; height: 550px; margin: 0 auto; -webkit-overflow-scrolling: touch;} 

나는 몇 가지 조사 후이 다음 http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/를 해결했다.

그래서 위치 추가 :이 문제를 해결했지만 새로운 문제가 생겼습니다. 위치를 추가하기 전에 표가 전체 페이지 너비를 채우고있었습니다. 위치를 추가 한 후에 멈추었습니다.

업데이트 CSS :

.longList {overflow: auto; height: 550px; margin: 0 auto; -webkit-overflow-scrolling: touch; position:fixed;} 

나는 동안 (클래스 후보작으로) 사업부에 폭을 지정하지만 난 DIV에있는 폭을 지정할 때마다, 나는 다시 원래의 문제를 생각하여 해결하기 위해 시도 테이블이 전체 페이지를 가로 채 웁니다 (가로 방향). 내용이 다시 잘립니다!

아무도 이런 상황을 경험하지 못했습니다.

Answer 1

그래서이 문제를 해결하는 솔루션을 발견했습니다. 임베디드 콘텐츠가있는 iFrames 및 div와 비슷한 문제가 발생했습니다. 나는 이것이 iFrames에서 얼마나 잘 작동하는지 확신하지 못한다. 그러나 div에서는 트릭을하는 것처럼 보인다.

는를 일으키는 요소가 페이지에 표시되는 동안 페이지가 를로드 후 코드 의 다음 줄을 사용합니다. 이렇게하면 요소의 다시 그리기/리플 로우가 강제 실행되고 전체 내용이 표시됩니다.

//Fix for mobile webkit browsers not rendering full content 
$('.divWithContent').parent().hide().show(0); 

당신은 당신이 아직없는 경우 문제가있는 사업부 또는 iframe에 대한 래퍼를 추가해야합니다, 당신이 깜빡이거나 당신이 필요한 것보다 더 많은 콘텐츠 재건되지 않은 방법입니다.

샘플 구조 : 당신의 사업부는 페이지로드에서 볼 수 있습니다

<div class="wrapper"> 
    <div class="divWithContent"> 
    ... 
    </div> 
<div> 

, 여기 당신이 솔루션을 사용할 수있는 하나의 방법입니다. 당신도 약간의 지연을 추가해야 할 수 있습니다 :

$(document).ready(function() { 
    $('.divWithContent').parent().hide().show(0); 
} 

이 요소가 현재 사용하지 않는 작업을 숨겨됩니다. 요소가 현재 장치 뷰포트에 표시되어야하지만 요소가 페이지에 있어야하며 숨겨지지 않아야합니다.