आईओएस सफारी/क्रोम - मोडल

Question

के अंदर इनपुट पर ध्यान केंद्रित करते समय अनचाहे स्क्रॉलिंग सफारी और क्रोम में परीक्षण - एक ही परिणाम, इसलिए मुझे लगता है कि यह आईओएस मुद्दा है।

यह तब होता है जब मोडल के अंदर कोई इनपुट होता है और मैं उस इनपुट को टैप करता हूं। उसी पल में इनपुट को फोकस मिला और मूल आईओएस कीबोर्ड दिखाई दे रहा है।

उसी क्षण में मोडल के नीचे पृष्ठ स्वचालित रूप से इसकी ऊंचाई के 50% तक स्क्रॉल हो जाता है। यह व्यवहार पूरी तरह से अवांछित है और मुझे इस डिफ़ॉल्ट आईओएस "फीचर" को रोकने के लिए कोई संकेत नहीं है।

डेमो:

Answer 1

बस यहाँ एक जवाब को जोड़ने के लोग इस सवाल (rather than your other question, which has a great demo to illustrate this issue)

हम काम पर एक समान मुद्दे का सामना कर रहे पर आते हैं। जैसा कि आपने बताया है, ऑफसेट हमेशा पृष्ठ की ऊंचाई का ~ 50% है, जो कि आपका प्रारंभिक ऑफसेट कहां है, इस पर ध्यान दिए बिना होता है।

अतीत में, जब मैंने पहले iOS संस्करण के साथ एक समान "कूद" (हालांकि, बहुत कम नाटकीय कूद) मनाया, मैं आमतौर पर body (which allows overflow: hidden to properly work) को position: fixed (या relative) लगाने से यह चारों ओर काम किया है।

हालांकि, यदि उपयोगकर्ता स्क्रॉल हो गया है, तो उपयोगकर्ता को पृष्ठ के शीर्ष पर वापस कूदने का अप्रत्याशित परिणाम है।

इसलिए, यदि आप कुछ JavaScript के साथ इस मुद्दे को संबोधित करने के लिए खुले हैं, तो यहाँ एक फिक्स है/हैक मैं एक साथ फेंक दिया गया है:

// Tapping into swal events 
onOpen: function() { 
    var offset = document.body.scrollTop; 
    document.body.style.top = (offset * -1) + 'px'; 
    document.body.classList.add('modal--opened'); 
}, 
onClose: function() { 
    var offset = parseInt(document.body.style.top, 10); 
    document.body.classList.remove('modal--opened'); 
    document.body.scrollTop = (offset * -1); 
} 

और क्या सीएसएस की तरह दिखता है:

.modal--opened { 
    position: fixed; 
    left: 0; 
    right: 0; 
} 

यहां अपने डेमो पेज (आपके अन्य प्रश्न से) का एक कांटा है, उदाहरण के लिए: https://jpattishall.github.io/sweetalert2/ios-bug.html

और उन लोगों के लिए जो अधिक सामान्य फिक्स ढूंढ रहे हैं, आप कुछ कर सकते हैं जैसे ething/जब खोलने एक मॉडल को बंद करने के बाद:

function toggleModal() { 
    var offset; 
    if (document.body.classList.contains('modal--opened')) { 
     offset = parseInt(document.body.style.top, 10); 
     document.body.classList.remove('modal--opened'); 
     document.body.scrollTop = (offset * -1); 
    } else { 
     offset = document.body.scrollTop; 
     document.body.style.top = (offset * -1) + 'px'; 
     document.body.classList.add('modal--opened'); 
    } 
} 

संपादित करें: "स्थानांतरण/unshifting" पर डेस्कटॉप बचने के लिए, मैं सुविधा का पता लगाने/ua केवल मोबाइल सफारी को यह लागू करने के लिए सूँघने सुझाव है।

Answer 2

मैं 100% यकीन नहीं है, लेकिन मैं निम्नलिखित कल्पना कर सकता:

जब कुंजीपटल दिखाई देता है, खिड़की ऊंचाई कम हो जाती है, लेकिन scrollTop मूल्य अब भी है वही, इसलिए साइट उस मान पर कूद जाती है। मोडल खुला होने पर आप body पर overflow:hidden जोड़ सकते हैं। यह मॉडलिंग के पीछे "पीछे" स्क्रॉलिंग को अवरुद्ध करेगा और शायद आपकी समस्या का समाधान करेगा।

Answer 3

मुझे इस मुद्दे का भी अनुभव हुआ है। एक संक्षिप्त स्पष्टीकरण यह है कि आईओएस सफारी किसी भी इनपुट पर ध्यान केंद्रित करने का प्रयास करेगा जो इस पर केंद्रित है और इस विशेष मामले में केंद्रित तत्व एक निश्चित स्थान के भीतर है। सफारी स्क्रीन पर तत्व को केंद्र में रखना चाहता है, इसलिए पृष्ठभूमि स्क्रॉलिंग को निश्चित स्थिति तत्व ढूंढने के साथ संघर्ष करना प्रतीत होता है।

एक संभावित फिक्स इनपुट क्षेत्र में touchstart ईवेंट श्रोता जोड़ने और ओवरले की वर्तमान स्थिति की गणना करना है, स्थिति को पूर्ण करने के लिए स्थिति को बदलें और ऊपर/बाएं स्थिति को अपडेट करें ताकि ओवरले को स्क्रीन पर रखा जा सके जब तय किया गया है, और अंत में इनपुट पर फोकस/धुंधला छोड़ते समय ओवरले को रीस्ट पोजिशनिंग पर रीसेट करने के लिए नया blur श्रोता जोड़ें। यह पृष्ठ को स्क्रॉलिंग से रोकना चाहिए। मैं touchstart का उपयोग करने का सुझाव देता हूं क्योंकि इसे focus ईवेंट से पहले ट्रिगर करना चाहिए, जिस स्थिति में पृष्ठ पहले ही स्क्रॉलिंग शुरू कर देगा। focus ईवेंट ट्रिगर होने पर सफारी पूर्ण स्थान ओवरले ढूंढने और केंद्र में सक्षम होना चाहिए।

Answer 4

इसलिए मैंने इसे हल किया है और अपने आईफोन 5 पर परीक्षण किया है, आईपैड को जांचने के लिए नहीं है। मैंने अपने समाधान में overflow:hidden अक्षम कर दिया है, आप जोड़ सकते हैं, यदि आप सभी मॉडलों के लिए सभी को स्क्रॉल अक्षम करना चाहते हैं। समाधान एचटीएमएल और बॉडी तत्व दोनों के लिए मूल रूप से ऊंचाई और स्थिति संपत्ति जोड़ने के लिए है।

html, body { 
    position:relative; 
    /*overflow:hidden;*/ 
    height: 100%; 
} 

तो, यह है कि केवल जब आप इनपुट, ऊंचाई और स्थिति पर ध्यान केंद्रित करने में परिभाषित किया जाएगा, मैं पहले से ही अपने रेपो से इस समाधान कोड किया है, मैं तुम्हें एक पुल अनुरोध भेजेगा। मैंने आपके गल्प सेटअप में ब्राउज़र सिंक भी जोड़ा है। इसलिए, अब किसी भी डिवाइस पर परीक्षण करना आसान होगा।

चीयर्स!

संपादित करें: एक और तरीका, अगर उपरोक्त समाधान किसी कारण से काम नहीं करता है। तो,

/* 
    * @summary touch handler; will remove touch ability 
    * @author yeomann 
    */ 
    function Touchyhandler(e) { 
    e.preventDefault(); 
    } 

और बाद में व्यावहारिक आईओएस 9.3 पर परीक्षण किया इस

//to add 
document.addEventListener('touchmove', Touchyhandler, false); 
//to remove 
document.removeEventListener('touchmove', Touchyhandler); 

js ऊपर समाधान की तरह जोड़ सकते हैं और स्पर्श श्रोता को हटा दें।2 मेरे लिए आकर्षण की तरह काम]

Answer 5

स्क्रॉलिंग से पृष्ठ को रोकने के लिए, दोनों एक्स, और वाई अक्ष में, हम overflow: hidden; सीएसएस में विशेषता का उपयोग करते हैं।

तो अगर हम शरीर को यह लागू होते हैं,

body { 
    overflow: hidden !important; 
} 

यह सही काम करना चाहिए?

वास्तव में, यह वास्तव में काम नहीं करता है, क्योंकि आपने पूरे पृष्ठ के लिए पूरे समय के लिए x और y स्क्रॉलिंग अक्षम कर दी है।

इसे बाईपास करने के लिए, हम मोडल सक्रिय होने पर शरीर को कक्षा जोड़ने के लिए एक जावास्क्रिप्ट का उपयोग कर सकते हैं।

सबसे पहले हमें अपने शरीर में एक आईडी जोड़नी होगी, <body id="body"> यह जावास्क्रिप्ट को शरीर को पहचानने की अनुमति देता है।

दूसरा, हमें अपने मोडल, <div id="modal"> पर एक आईडी जोड़नी होगी, जिससे जावास्क्रिप्ट को मोडल को पहचानने की इजाजत मिल जाएगी।

<script type="text/javascript"> 
    function modalActive() { 
     if (document.getElementById("modal").classList.contains("active")) { 
      document.getElementById("body").classList.add("modal-active"); 
     } else { 
      getElementById("modal").classList.remove("active")); 
      getElementById("body").classList.remove("modal-active"));   
     } 
    } 
</script> 

दोनों बटन कि शुरूआत, और क्रिया बंद कर देता है के लिए, हम एक ऑनक्लिक ईवेंट जोड़ना होगा,

<button onclick="modalActive()">Click Me!</button>

उस के शीर्ष पर हम सीएसएस फ़ाइल को यह जोड़ना होगा।

body { 
    overflow: initial !important; 
} 

body.modal-active { 
    overflow: hidden !important; 
} 

और वहां हम जाते हैं।

Answer 6

मैंने कई चीजों की कोशिश की जो HTML पृष्ठ पर बाउंसिंग मोडल इनपुट के लिए काम करते थे। मेरे लिए काम करने वाला सबसे आसान समाधान पृष्ठ पर खुला होने पर बॉडी टैग में निम्नलिखित शैलियों को जोड़ रहा था।

position: fixed; 
width: 100%;