मोबाइल सफारी को फोकस पोजिशन को इनपुट फोकस पर पूर्ण करने से कैसे रोकें?

Question

अस्वीकरण - मैं समझता हूं कि सफारी में निश्चित तत्वों के आसपास प्रश्न मौजूद हैं, और निश्चित तत्व समर्थित नहीं थे, लेकिन अब और आगे हैं। हालांकि मुझे कोई प्रश्न नहीं मिल रहा है जो इस सटीक प्रश्न को संबोधित करता है। ,

.sidebar { 
    position: fixed; 
    top: 10px; 
    right: 10px; 
} 

और एक अपेक्षाकृत लंबे पेज इनपुट तत्वों के साथ:

तय साइडबार, की तरह कुछ का सरलतम को देखते हुए।

जब कोई इनपुट तत्व केंद्रित होता है, तो कोई निश्चित तत्व पूर्ण हो जाता है - मैं समझता हूं कि क्यों सफारी व्यूपोर्ट को अस्वीकार करने की कोशिश कर रहा है - ठीक है, लेकिन हमेशा उपयुक्त नहीं है। मैं पूछता हूं कि मुझे उपयोगकर्ता के लिए सबसे अच्छा अनुभव चुनना है (मुझे स्वाभाविक रूप से सबसे अच्छा पता है)।

तो सवाल ..

वहाँ किसी भी तरह से के रूप में तय भी जब इनपुट तत्वों ध्यान केंद्रित कर रहे तय तत्वों को छोड़ने के लिए है?

मैंने स्क्रॉल पर मैन्युअल रूप से $(window).on('scroll', जादू और स्थिति तत्वों को करने का प्रयास किया है, लेकिन यह आईपैड पर काफी उत्साहजनक है।

Answer 1

Safari has supported position: fixed कम से कम संस्करण 9.2 के बाद से, लेकिन यदि आप कठिन समस्याएं देख रहे हैं, तो आप दस्तावेज़ तत्व और शरीर पूर्ण स्क्रीन बनाकर और फिर पूर्ण स्थिति का उपयोग करके निश्चित स्थिति प्रभाव बना सकते हैं। तब स्क्रॉलिंग शरीर के बजाए कुछ मुख्य कंटेनर तत्व में होती है। इस विधि का उपयोग कर मार्कअप में आपके "निश्चित" तत्व कहीं भी मौजूद हो सकते हैं।

jsfiddle here

html, 
body, 
.mainContainer { 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
    margin: 0; 
} 

.mainContainer { 
    overflow: auto; 
} 

.fixed { 
    position: absolute; 
    bottom: 20px; 
    left: 20px; 
} 

Answer 2

क्रम प्रभाव आप इच्छा आप लेआउट करने के लिए अपने दृष्टिकोण को बदलने की जरूरत को प्राप्त करने के। स्थिति के साथ साइडबार को पोजिशन करने के बजाए: निश्चित रूप से आपको स्थिति का उपयोग करने की आवश्यकता है: एक स्थिति के भीतर पूर्ण: रिश्तेदार कंटेनर जो उस स्थिति के भीतर व्यूपोर्ट की ऊंचाई पर सेट होता है: सापेक्ष कंटेनर आपको ओवरफ्लो-वाई का उपयोग करने वाले किसी अन्य div की आवश्यकता होती है: स्क्रॉल और - वेबकिट-अतिप्रवाह-स्क्रॉलिंग: स्पर्श

चेतावनी: मैं आम तौर पर हालांकि ब्राउज़र समर्थन नहीं है, मेरे अनुभव में यह janky हो जाएगा स्थिति टेबलेट पर तय & मोबाइल यदि संभव हो तो उपयोग करने से बचें और जावास्क्रिप्ट समाधान एक बहुत छोड़ होने के लिए वांछित, मेरी पहली प्रतिक्रिया डिजाइनर के साथ पैटर्न को चुनौती देना होगा। यदि मुझे डिज़ाइन दिया गया है जिसमें इनपुट तत्व होने पर एक निश्चित निश्चित तत्व शामिल है, तो मुझे विकास के मुकाबले डिज़ाइन समाधान की अधिक संभावना है क्योंकि आपके द्वारा वर्णित फ़ोकस समस्याओं को गुणवत्ता उपयोगकर्ता अनुभव को बाधित करना और बनाए रखना मुश्किल है । https://codepen.io/NeilWkz/full/WxqqXj/

यहाँ:

मार्कअप:

<div class="outer"> 
    <div class="sidebar"> 
    <ul> 
     <li>Dummy list nav or something</li> 

    </ul> 
    </div> 
    <div class="container"> 
     <input type="text" /> 
    <!-- I added 10000 inputs here as a demo --> 
</div> 
</div> 

सीएसएस: यदि आप अपने सिम्युलेटर (प्रस्तुतिकरण दृश्य) में खोलने के लिए के लिए

html,body{ 
-webkit-overflow-scrolling : touch !important; 
overflow: auto !important; 
height: 100% !important; 
} 
.outer { 
    position: relative; 
    overflow: hidden; 

/* I'm using Viewport Units here for ease, but I would more likely check the height of the viewport with javascript as it has better support*/ 
    height: 100vh; 
} 
.sidebar { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    /*added bg colour for demo */ 

    background: blue; 
} 
.container { 
    height: 100vh; 
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch 
} 
input { 
    display: block; 
} 

यहाँ एक CodePen है कोड के लिए संपादक देखें: https://codepen.io/NeilWkz/pen/WxqqXj