मोबाइल सफारी स्क्रॉल काम नहीं कर रहा

Question

मैं इस समय एक संवेदनशील साइट के साथ कोई समस्या का एक सा हो रही है गति।

सभी लेकिन पृष्ठों में से एक स्क्रॉल गति आप सामान्य रूप से अपने फोन पर इंटरनेट का उपयोग करने से मिलेगा नहीं मिलता है। मुझे यकीन है कि अगर यह मोबाइल सफारी या अन्य मोबाइल ब्राउज़रों के लिए प्रतिबंधित है नहीं कर रहा हूँ, मैं सिर्फ इस साइट पर उत्तरदायी काम शुरू कर दिया है।

लेकिन, क्या किसी को पता है कि क्यों कुछ पृष्ठों स्क्रॉल गति नहीं हो सकता है? कुछ पेज छवियों और थोड़ा jQuery के साथ काफी भारी हैं, लेकिन मुझे नहीं लगता कि प्रतिपादन के मुद्दों के कारण पर्याप्त है।

कोई भी विचार?

देव साइट का लिंक है: apt.codeplayground.co.uk।

[संपादित करें]

वहाँ प्रकट होता है के रूप में इस पृष्ठ के बारे में है कि काम कर रहा था पर शामिल नहीं किया गया था, हमारे .wrapper div के साथ एक समस्या होने के लिए, अब हम यह पुस्तक ठीक से काम नहीं करता है शामिल किया है।

Answer 1

मैं सिर्फ एक ही समस्या थी। मुझे this link मिला, जिसने इस मुद्दे को हल किया। -webkit-अतिप्रवाह-स्क्रॉलिंग:

तत्व यह है कि स्क्रॉल करने के लिए सीएसएस की इस पंक्ति जोड़ें स्पर्श;

#element_that_scrolls 
{ 
    overflow:auto; 
    -webkit-overflow-scrolling: touch; 
} 

Answer 2

केवल शरीर को देशी स्क्रॉलिंग मिल रही है। ओवरफ्लो स्क्रॉल वाले किसी भी तत्व वास्तव में धीमे हैं। स्पर्श स्क्रॉलिंग इसे ठीक कर सकती है लेकिन यदि आप कर सकते हैं तो शरीर को स्क्रॉल करना बेहतर होता है। यह बहुत तेज़ है और जीपीयू बनावट कंपोजिटिंग का बेहतर उपयोग करता है।

टच स्क्रॉल स्क्रॉल तत्व का एक स्नैपशॉट बनाने के साथ जब आप स्क्रॉल शुरू करते हैं। यह उस जीपीयू बनावट के रूप में छवि को जोड़ता है जब आप स्क्रॉल करना बंद करते हैं तो यह GPU बनावट को नष्ट कर देता है। शरीर स्क्रॉल को आपके बनावट मेमोरी का बेहतर उपयोग करने देता है और यह आमतौर पर बेहतर समाधान होता है।

Answer 3

सीएसएस संपत्ति के संबंध में @ मार्क ने जो कहा है, उसके साथ हमें यह याद रखना होगा कि इस संपत्ति को स्क्रॉल की गई सामग्री के माता-पिता को दिया जाना आवश्यक है।

मतलब गति की जरूरत सामग्री स्क्रॉल किया जा करने के लिए के कंटेनर पर काम कर सकते हैं। सीधे सामग्री पर नहीं, अन्यथा वह समझ में नहीं आता कि कैसे और किस गति को गति देना है।

.element_that_scrolls 
{ 
    overflow:auto; 
    -webkit-overflow-scrolling: touch; 
} 

//Wrong 
<ul class="element_that_scrolls"> 
    ... 
</ul> 

//Correct 
<div class="element_that_scrolls"> 
    <ul> 
     ... 
    </ul> 
</div>