पॉपअप

Question

के रूप में उपयोग करते समय आईपैड div सामग्री स्क्रॉल नहीं कर रहा है मैं इस समस्या को हल नहीं कर सकता: मेरे पास एक div है जो मैं jquery के साथ पॉपअप के रूप में दिखाता हूं और छुपाता हूं। सामग्री फेसबुक की टिप्पणियां प्लगइन है।

#popup { 
position:absolute; 
left:0px; 
top:0px; 
width:512px; 
height:530px; 
background:url(../img/bg_popup.gif) repeat-x 0px 0px; 
display:none; 
overflow:hidden; 
z-index:110; 
} 

#popup .mask { 
margin:5px 0px 0px 10px; 
width:498px; 
height:475px; 
overflow-y: scroll; 
overflow-x: hidden; 
} 

मैं स्थिति रहा हूँ jQuery के साथ स्क्रीन के केंद्र में पॉपअप, और सब कुछ सभी ब्राउज़रों पर अच्छा काम करता है:

<div id="popup"> 
    <div class="mask"> 
     <div class="fb-comments" data-href="http://www.example.com" data-num-posts="30" data-width="470" data-colorscheme="light"></div> 
    </div> 
</div> 

यह सीएसएस मैं अब तक किया है: यह कोड है । पॉपअप प्रकट होता है और मैं सामग्री को स्क्रॉल कर सकता हूं।

समस्या आईपैड सफारी के साथ है। Div स्क्रॉल नहीं करता है, और पहले से ही वेबकिट-ओवरफ्लो-स्क्रॉलिंग का उपयोग करने का प्रयास कर रहा है: स्पर्श करें, लेकिन कुछ भी नहीं होता है।

एक और बात: यदि मैं पॉपअप div डिस्प्ले "ब्लॉक" पर सेट करता हूं, स्क्रॉलिंग काम करता हूं, लेकिन सामग्री टुकड़ों में दिखाई देती है।

कोई विचार? धन्यवाद!

Answer 1

.mask css को ऊंचाई ऑटो में बदलें और y-axis पर jQueryUI draggable का उपयोग करके खींचें। #popup div अतिप्रवाह छिपा हुआ है और इस मामले में "वास्तविक" मुखौटा है। तो आप वर्तमान। मास्क div ऊपर/नीचे ले जा सकते हैं लेकिन बाएं/दाएं नहीं। यदि उपयोगकर्ता #popup div के बाहर स्क्रॉल कर रहा है, तो आपको सुधार के लिए कुछ गणित की आवश्यकता है। इससे पहले कि आपको स्टॉप इवेंट पर सुनना होगा। यह केवल टचस्क्रीन पर काम कर रहा है। डेस्कटॉप क्लाइंट पर आपको पहले क्लिक करके div को खींचना होगा (लेकिन थोड़ा सा कोड के साथ आप इसे संभाल सकते हैं)।

jQueryUI के साथ साथ बेहतर तरीके से समर्थन जोड़ने के लिए jQuery UI Touch Punch

उदाहरण:

$('#popup .mask').draggable(
    axis:"y", 
    stop:function(event, ui){ 
     // If there's any correction required you can do here 
     // e.g. the overscroll like on iOS 
    } 
);