2016-06-24 1 views
15

मेरे पास एक कंटेनर है जिसमें position:fixed है जिसमें स्क्रॉलिंग सामग्री है। मैं इसे मोबाइल उपकरणों पर चैट फीचर के रूप में प्रदर्शित कर रहा हूं लेकिन मोबाइल सफारी पर, position:fixed कंटेनर के अंदर स्क्रॉलिंग सामग्री अचानक स्क्रॉलिंग बंद कर देती है और कंटेनर को स्क्रॉल करना शुरू कर देती है।मोबाइल पर एक निश्चित स्थिति div के अंदर स्क्रॉलिंग सामग्री सफारी अचानक बंद हो जाती है - और कंटेनर को स्क्रॉल करना शुरू कर देता है

ओपन मोबाइल सफारी पर इस लिंक प्रभाव देखने के लिए: http://jsbin.com/ruyito

संपादन योग्य यहाँ उदाहरण: http://jsbin.com/ruyito/edit?html,css,output

प्रश्न: मेरे कंटेनर div शुरू अचानक अपनी स्थिति को स्क्रॉल करने के लिए करता है क्यों और सामग्री स्क्रॉल रोक? (एंड्रॉइड पर क्रोम पर, यह बिना किसी समस्या के काम करता है)

नोट: यदि आपको इस बग को ट्रिगर करने में समस्या हो रही है, तो सामग्री को 10 सेकंड या उससे भी अधिक समय तक ऊपर और नीचे स्क्रॉल करना जारी रखें, अंत में यह अचानक स्क्रॉलिंग बंद कर देगा।

+0

को मैं सिर्फ यह परीक्षण किया जोड़ने के लिए एक पर कोशिश करते हैं और यह पुन: पेश नहीं कर सका। आप किस पर परीक्षण कर रहे हैं? –

उत्तर

1

मैंने लिंक खोला (http://jsbin.com/ruyito) आईफ़ोन 6 - सफारी और सब कुछ ठीक दिखता है। अपेक्षित सामग्री स्क्रॉल। मैंने कई बार ऊपर और नीचे स्क्रॉल करने की कोशिश की लेकिन कुछ भी नहीं हुआ।

यह संस्करण किस प्रकार होता है? मैं बिना किसी अनुभव के कुछ भी कह सकता था लेकिन मुझे लगता है कि यह वर्चुअल स्क्रॉल मुद्दा हो सकता है।

आप इसे जोड़कर इसे अक्षम कर सकते हैं।

.chat-container-mobile { 
    -moz-transition: none; 
    -webkit-transition: none; 
    -o-transition: color 0 ease-in; 
    transition: none; 
} 
1

मुझे नहीं पता कि यह सौदा क्या है। ऐसा हो सकता है कि सफारी इसे जल्दी से स्थानांतरित करते समय फ्रीज करता है क्योंकि यह अभी भी तकनीकी रूप से कंटेनर को इंस्पेक्टर टूल परिभाषा के तरीके से ले जाता है, बस इसे स्क्रीन पर चित्रित नहीं करता है।

एक बात जो आप कोशिश कर सकते हैं कि मैंने इंस्पेक्टर उपकरण में किया था और इस मुद्दे को हल करने के लिए लगता है वह आपके पास रिवर्स इंजीनियरिंग है। इस कोड को अपने कोड में आज़माएं। अन्य दो तत्वों पर अपने .chat-container-mobile और z-index/bottom/positioning पर स्थिति/ऊंचाई/पैडिंग को नोट करें।

<style> 
.chat-container-mobile { 
position: fixed; 
background-color: #EBEBEB; 
padding: 15px; 
display: block; 
margin: 0; 
top: 0px; 
color: #444444; 
overflow: scroll; 
-webkit-overflow-scrolling: touch; 
height: calc(100vh - 50px); 
padding: 75px 15px 125px; 
} 
.chat-mobile-header { 
position: fixed; 
z-index: 10; 
width: 100%; 
background-color: white; 
color: #444444; 
text-transform: uppercase; 
letter-spacing: 0.04em; 
font-size: 15px; 
font-weight: 500; 
text-align: center; 
top: 0; 
margin: 0; 
padding: 17px 0; 
border-bottom: 1px solid rgba(68, 68, 68, 0.2); 
} 
.chat-field-mobile { 
position: fixed; 
width: 100%; 
z-index: 10; 
bottom: 0; 
margin: 0px; 
padding: 12px 12px 10px 10px; 
background-color: #EBEBEB; 
border-top: 1px solid rgba(68, 68, 68, 0.1); 
} 
</style> 

ऐसा करने से यह अन्य तत्व आपके चैट विंडो के शीर्ष पर बस अपने टुकड़ों को ढेर करने या मजबूर करने की कोशिश करने के बजाय झूठ बोलते हैं।

उम्मीद है कि यह दोस्त की मदद करता है!

2

आईओएस सफारी में overflow: scroll div का उपयोग करने का प्रयास करते समय मैं कई बार इस मुद्दे पर आया हूं।

मेरी समझ यह है कि यह overscrolling/लोचदार स्क्रॉलिंग एनिमेशन के साथ करना है। क्या लगता है तो होना ही है:

  1. जब एक निश्चित कंटेनर (अर्थात खिड़की, या अपने स्क्रॉल div) इन ऐनिमेशन घटनाओं कि कंटेनर के लिए लॉक हो जाता है चल रहा है।
  2. जब overflow: scroll कंटेनर इसकी स्क्रॉल ऊंचाई के ऊपर/नीचे हिट करता है तो यह मूल कंटेनर स्क्रॉल करना शुरू करता है - यह क्रोम में भी मामला है।

आप अपने उदाहरण में नोटिस कर सकते हैं कि जब स्क्रॉलिंग काम करना बंद कर देती है, तो थोड़ी सी अवधि के लिए स्क्रीन को छूना नहीं (500ms कहें?) फिर फिर से काम करने की कोशिश कर रहा है।

मुझे लगता है कि क्या हो रहा है यह है कि जब आप अपने स्क्रॉलिंग कंटेनर के नीचे/ऊपर हिट करते हैं, तो घटनाएं इस मामले में विंडो में पैरेंट हो रही हैं। जबकि आप इस स्थिति में बातचीत करते रहते हैं, आपकी घटनाएं इसे आपके स्क्रॉलिंग कंटेनर में कभी नहीं बनाती हैं, और इसलिए यह अनुत्तरदायी प्रतीत होता है।

मैं दस्तावेज़ करने के लिए मेरी स्क्रॉल कंटेनर से स्पर्श इवेंट प्रचार नहीं द्वारा अतीत में कुछ सफलता मिली है:

$('.chat-container-mobile').on({ 
    'touchstart': _onTouchStart, 
    'touchmove': _onTouchMove, 
    'touchend': _onTouchEnd 
}); 

function _onTouchStart(e) { 

    e.stopPropagation(); 
} 

function _onTouchMove(e) { 

    e.stopPropagation(); 
} 

function _onTouchEnd(e) { 

    e.stopPropagation(); 
} 

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

आप इन स्पर्श घटनाओं के लिए $(document) पर e.preventDefault का उपयोग करने का भी प्रयास कर सकते हैं। यह विंडो को पहले उपयोगकर्ता में इन उपयोगकर्ता इनपुट पर प्रतिक्रिया करने से रोकता है, फिर भी यदि आपको ब्राउज़र डिफ़ॉल्ट बनाए रखने की आवश्यकता है तो यह कई अन्य समस्याएं पैदा कर सकता है।

इन बाइंडिंग को केवल उन स्थितियों में स्थानांतरित करने का प्रयास करें जहां यह एक समस्या है। तो घटनाओं पर बाध्य करने से पहले आईओएस और सफारी की जांच करें।

अगली बार जब मैं समस्या से निपटने का प्रयास करता हूं तो मैं किसी भी अतिरिक्त निष्कर्षों के साथ वापस आऊंगा - जो, ईमानदार रहें, लगभग हर परियोजना है।

शुभकामनाएं!

1

सिर्फ तिथि 6S अप करने के लिए bottom:0.chat-container-mobile { bottom:0 }

संबंधित मुद्दे