Android/PhoneGap의 overflow-y가 이상한 동작을 생성합니다.

PhoneGap으로 개발중인 HTML5/jQuery Mobile 앱이 있습니다. 나는이 응용 프로그램을 iOS에 성공적으로 배포했으며 지금 Android에 이식 중입니다.Android/PhoneGap의 overflow-y가 이상한 동작을 생성합니다.

Android 기기 (Ice Cream Sandwich를 실행중인 Samsung Galaxy S2)에서이 앱을 테스트 할 때 이상한 동작이 발생했습니다.

div에 포함 된 요소 목록이 있고 해당 div의 높이가 고정되어 있습니다. 또한 모바일 사용자가 목록을 스크롤 할 수 있도록 CSS 속성 overflow-y : scroll을 사용합니다. 목록에 앵커 링크가 포함되어 있습니다. 이처럼 :

<div style="display: block; width: 320px; height: 250px; overflow-y: scroll;"> 
    <a href="index1.html">Link 1</a> 
    <a href="index2.html">Link 2</a> 
    <a href="index3.html">Link 3</a> 
    <a href="index4.html">Link 4</a> 
</div>

앵커 링크의 목록 상자의 표준 높이에서 여전히 (즉 목록은 단지 몇 요소가있는 경우), 그것을 잘 작동합니다. 링크를 탭하면 예상대로 작동합니다. 그러나 링크 목록 이 상자의 너비를 초과하여 확장되고 overflow-y 스크롤이 적용되면 링크를 더 이상 탭할 수 없습니다. 스크롤은 완벽하게 작동하지만 스크롤 div의 요소 중 하나를 탭할 수는 없습니다.

이상하게도 내가 링크로 할 수없는 것은 브라우저의 텍스트 선택 기능을 사용하여 링크를 선택하는 것입니다. 스크롤링을위한 링크가 너무 적을 때 가능하지만 스크롤이 활성화되어있을 때는 불가능합니다.

나는 ICS가 탑재 된 Galaxy S2가 overflow-y 스크롤링을 적절히 지원할만큼 충분히 새 것이지만 어쩌면 내가 틀렸다고 가정했다. 이걸 어떻게 작동시킬 수 있을지에 대한 생각은? Ice Cream Sandwich에서 버그 나 오버플로 -y에 대한 지원과 관련하여 온라인에서 구체적인 것을 찾을 수 없습니다.

출처

2012-11-30 Brandon Tooke

해당 링크에 탭 이벤트 처리기를 직접 첨부 할 수 있습니까? jQuery 모바일 링크는 그들이 보는 것만 큼 단순하지 않습니다.

iOS를 시작한 이래로 iOS 관련 CSS가 남아 있습니까? iOS에서 멋진 스크롤링을 얻으려면 때때로 하드웨어 가속을 트리거하는 데 3D 변형을 추가해야하지만 안드로이드에 대한 흥미로운 부작용이있을 수 있습니다.

시도해 볼 가치가있는 또 다른 사항은 overflow-y 대신 overflow을 설정하는 것입니다.이 값은 달라야하지 않지만 때로는 그렇습니다.

출처

2012-12-03 04:14:29

나는이 오래된 질문 알아요,하지만 난 여전히 폰갭/코르도바의 현재 버전으로 일어나고 있기 때문에 솔루션이 도움이 될 수 있다고 생각 : 당신은이에 transform 속성을 추가 할 필요가

이 문제를 해결하려면 고정 요소, 귀하의 경우 주요 사업부 :

div { 
    -webkit-transform: translate3d(0,0,0); 
    transform: translate3d(0, 0, 0); 
}

크레딧 here

출처

2015-07-10 11:10:12 andresigualada

Android/PhoneGap의 overflow-y가 이상한 동작을 생성합니다.

답변

관련 문제