आईओएस सफारी में स्क्रॉलिंग से अंतर्निहित div को रोकें

Question

मेरे पास div है जो 100% ऊंचाई, 70% व्यूपोर्ट ऊंचाई, और overflow:scroll है।

अब मैं ओवरलेइंग div बनाना चाहता हूं जो स्पर्श डिवाइस div के बजाय पूरे पृष्ठ को स्क्रॉल करने के लिए उपयोग कर सकते हैं।

मैं position:absolute और पूरे पृष्ठ ऊंचाई के साथ एक div बनाया। यदि एंड्रॉइड उपयोगकर्ता इस div पर खींचते हैं, तो पूरे पृष्ठ स्क्रॉल की अपेक्षा की जाती है। हालांकि, आईओएस 7 पर अंतर्निहित div स्क्रॉल किया गया है, जैसे टच इवेंट div सही हो जाता है।

JSFiddle

.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); 
} 

आप स्क्रॉल div से अधिक iOS7 और खींचें का उपयोग करते हैं पेज div पर, स्क्रॉल div पृष्ठ के बजाय स्क्रॉल किया गया है।

क्या कोई इस के लिए समाधान जानता है?

Answer 1

अपने .pageScroller स्क्रोलर तत्व पर, overflow-y: scroll; और -webkit-overflow-scrolling: touch; विशेषताएँ जोड़ें, साथ ही z-index के साथ। इससे स्क्रॉल एक्शन को नीचे "परत" तक पहुंचने से रोकता है।

.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/