आईओएस 8 वेबकिट-ओवरफ्लो-स्क्रॉलिंग: ओवरले

Question

के साथ स्पर्श करें मेरे पास वर्तमान में UIWebView के साथ एक ऐप है जिसमें वेबकिट-ओवरफ्लो-स्क्रॉलिंग के साथ स्क्रोल करने योग्य div है: स्पर्श स्पर्श करें। जब साइड मेनू खुला होता है, तो मैं डमीिंग प्रभाव देने के लिए सामग्री के शीर्ष पर ओवरले (एक और div) डालता हूं।

समस्या यह है कि जब मेनू खुला है (और जगह में ओवरले) जब उपयोगकर्ता पैन, स्क्रॉल div वास्तव में स्क्रॉल जब ओवरले इस फार्म हो रहा रोक दिया जाना चाहिए।

अब, आईओएस 7 में, समाधान वेबकिट-ओवरफ्लो-स्क्रॉलिंग जोड़ने का था: स्पर्श; ओवरले के लिए। यह एक आकर्षण की तरह काम करता है, लेकिन आईओएस 8 में यह नहीं करता है।

यहाँ समस्या का एक उदाहरण के लिए एक कड़ी है। यदि आईओएस 7 पर चलता है तो यह अपेक्षित काम करता है, अगर आईओएस 8 पर चलता है तो पीछे की सामग्री स्क्रॉल होगी।

.scrollable { 
    width:100%; 
    height:200px; 
    -webkit-overflow-scrolling:touch; 
    overflow:scroll; 
} 

.overlay {  
    position:absolute; 
    width:100%; 
    overflow:scroll; 
    height:200px; 
    -webkit-overflow-scrolling:touch; 
    background-color:black; 
    opacity:.5; 
    transform: translate3d(0,0,0); 
    -webkit-transform: translate3d(0,0,0); 
    z-index:10; 
} 

https://jsfiddle.net/SergioM/57f2da87/9/

मैं भी छिपा/ऑटो के लिए स्क्रॉल div की ओवरफ़्लो- एक्स संपत्ति सेट करते समय मेनू खोला जाता है, लेकिन यह एक भयानक झिलमिलाहट कहते हैं की कोशिश की।

किसी भी सुझाव की बहुत सराहना की जाएगी।

धन्यवाद।

Answer 1

खैर कई विभिन्न विकल्पों की कोशिश कर के बाद मैं आया वाई वें के आसपास एक काम अब के लिए काफी अच्छा है।

मैंने ओवरले के अंदर एक div जोड़ा जो लंबवत 1% बड़ा है। अब यह वारंटी है कि घटना ओवरले द्वारा संभाली जाती है और पीछे के कंटेनर पर नहीं जाती है। यह मुझे पैन (क्षैतिज) जैसे घटनाओं को सुनने की अनुमति देता है, लंबवत लोग नहीं आते हैं लेकिन यह अभी ठीक है।

.overlayInner { 
    color:red; 
    height:101%; 
    margin-left:30px; 
} 

यहाँ fiddle.The मार्जिन के लिए एक लिंक अनावश्यक है, बस संख्या ओवरलैप से बचना है।

http://jsfiddle.net/SergioM/57f2da87/15/

Answer 2

मुझे नहीं लगता कि यह केवल वर्तमान सफारी/iOS8 के वेबकिट-संस्करण में सीएसएस का उपयोग करके संभव है।

लेकिन आप जावास्क्रिप्ट के साथ स्क्रॉलिंग को रोकने में सक्षम होना चाहिए।

$(".showHide").click(function() { 
    $(".overlay").toggle(); 
}); 

$(".overlay").on('touchstart touchmove', function(event) { 
    if ($(this).is(":visible")) { 
     event.preventDefault(); 
    } 
}); 

अद्यतन:

मैं चारों ओर एक छोटे से खेला और एक अन्य संभावित समाधान है कि आप के लिए उपयोगी हो सकता है के साथ आया था।

HTML:

<button class="showHide">show/hide overlay</button> 
<br/> 
<br/> 
<div class="scrollable"> 
    <div class="overlay"></div> 
    1 
    <br/>2 
    <br/>3 
    <br/>4 
    <br/>5 
    <br/>6 
    <br/>7 
    <br/>8 
    <br/>9 
    <br/>10 
    <br/>11 
    <br/>12 
    <br/>13 
    <br/>14 
    <br/>15 
    <br/>16 
    <br/>17 
</div> 

सीएसएस:

.scrollable { 
    width:100%; 
    height:200px; 
    -webkit-overflow-scrolling:touch; 
    overflow:scroll; 
    position: relative 
} 
.overlay { 
    content: ' '; 
    position:absolute; 
    top: 0; 
    left: 0; 
    width:100%; 
    height:100%; 
    background-color:black; 
    opacity:.5; 
    transform: translate3d(0,0,0); 
    -webkit-transform: translate3d(0,0,0); 
    transition: opacity 300ms ease; 
    z-index:10; 
} 

जावास्क्रिप्ट:

$(".showHide").click(function() { 
    $(".overlay").toggle({ duration: 0, complete: function() { 
     if ($(".overlay").is(":visible")) { 
      $(".overlay").css('top', $(".scrollable").scrollTop()); 
      $(".scrollable").css('overflow', 'hidden'); 
     } else { 
      $(".scrollable").css('overflow', 'scroll'); 
     } 
    }}); 
}); 

उदाहरण: JSFiddle