기본 div가 iOS Safari에서 스크롤되지 않도록하기

Question

높이가 100 %, 뷰포트 높이가 70 %, overflow:scroll 인 div입니다.

이제 터치 장치가 div 대신 전체 페이지를 스크롤하는 데 사용할 수있는 오버레이 div을 만들고 싶습니다.

나는 position:absolute 및 전체 페이지 높이와 div를 만들었습니다. Android 사용자가이 div으로 끌면 전체 페이지가 예상대로 스크롤됩니다. 그러나 iOS7에서는 터치 이벤트가 div처럼 오른쪽 div처럼 스크롤됩니다. 당신은 스크롤 div를 통해 페이지 div에 iOS7에 드래그를 사용하는 경우

.scrollDiv{ 
    width:100%; 
    height:200px; 
    overflow-y:scroll; 
    border:solid 1px #f00; 
    -webkit-overflow-scrolling: touch; 
} 
.pageScroller{ 
    position:absolute; 
    right:0; 
    top:0; 
    bottom:0; 
    width:50%; 
    background-color: rgba(0,0,0,0.7); 
} 

JSFiddle

는, 스크롤 div 대신 페이지의 스크롤된다.

아무도이 문제에 대한 해결책을 알고 있습니까?

Answer 1

.pageScroller 스크롤 장치 요소에 z-index과 함께 overflow-y: scroll; 및 -webkit-overflow-scrolling: touch; 특성을 추가하십시오. 이렇게하면 아래의 "레이어"에 스크롤 동작이 적용되지 않습니다.

.pageScroller{ 
    position:absolute; 
    right:0; 
    top:0; 
    bottom:0; 
    width:50%; 
    z-index: 1; 
    background-color: rgba(0,0,0,0.7); 
    overflow-y:scroll; 
    -webkit-overflow-scrolling: touch; 
} 

확인이 JSfiddle : http://jsfiddle.net/R9Ut6/