एक्स-अक्ष के साथ वेबकिट-ओवरफ्लो-स्क्रॉलिंग समस्या?

Question

मैं निम्नलिखित सीएसएस के साथ एक स्क्रॉल div है:,

overflow-x:hidden; 
overflow-y:auto; 
-webkit-overflow-scrolling: touch; 
width:200px; 
height:500px; 

हालांकि iOS उपकरणों पर

जब div के अंदर सामग्री div खुद की तुलना में व्यापक है, एक्स अक्ष स्क्रॉल सक्षम है। मैं एक्स-अक्ष स्क्रॉलिंग को कैसे अक्षम करूं?

Answer 1

मुझे एक ही समस्या है और ऐसा लगता है कि दुर्भाग्य से -webkit-overflow-scrolling के लिए कोई x/y विकल्प नहीं हैं। आमतौर पर उपयोग किए जाने वाले वर्कअराउंड को स्क्रॉलिंग div को overflow-x: hidden div में लपेटना है और समस्या हल होनी चाहिए।

मार्कअप:

<div class="scroll-container"> 
    <div class="scroll-wrapper"> 
    <div class="scroll-body"> 
    </div> 
    </div> 
</div> 

स्टाइलिंग:

.scroll-container { 
    -webkit-overflow-scrolling: touch; 
    overflow: auto; 
    width: 200px; 
    width: 500px; 
} 
.scroll-wrapper { 
    width: 200px; 
    overflow-x: hidden; 
} 

Answer 2

एक इस के लिए वास्तव में आसान ठीक सिर्फ अपने तत्वों के बारे में सुनिश्चित कोई भी व्यूपोर्ट से अधिक व्यापक हैं बनाने के लिए है। यह आपके सीएसएस के शीर्ष पर "कैचॉल" रखकर पूरा किया जा सकता है:

div, span, h1, h2, h3, h4, h5, p, img, ul, li, ... ETC ... 
{ 
    max-width: 100%; 
}