मोबाइल ओवरफ़्लो: स्क्रॉल और ओवरफ़्लो-स्क्रॉलिंग: स्पर्श करें रोकें "बाउंस"

मोबाइल (सफारी, वेबव्यू, कहीं भी) पर, overflow:scroll और overflow-scrolling: touch एक सुंदर चिकनी स्क्रॉल दें, जो ठंडा है।मोबाइल ओवरफ़्लो: स्क्रॉल और ओवरफ़्लो-स्क्रॉलिंग: स्पर्श करें रोकें "बाउंस"

लेकिन, यह पृष्ठ "उछाल" (नीचे चक्र क्षेत्र) बनाता है, जो तब नहीं होता जब आप इसका उपयोग नहीं कर रहे हैं, लेकिन जो अनुभव को थोड़ा कम "देशी" बनाता है (और अधिक सरलता से, जहां तक मैं इसके बारे में राय रख सकता हूं, बिल्कुल अप्रयुक्त है)

क्या ऐसा होने से रोकने का कोई तरीका है? धन्यवाद आपकी मदद/संकेत के लिए एक बहुत/उत्तर

that kind of suxx

स्रोत

2013-03-31 Ben

वह मोबाइल सफारी का हिस्सा है। इसके बारे में आप इतना कुछ नहीं कर सकते हैं। संभावित डुप्लिकेट: http://stackoverflow.com/questions/5214348/stop-scrolling-over-edge-of- स्क्रीन-on-ios-web-apps – Mooseman

यहां संभावित डुप्लिकेट भी: http://stackoverflow.com/questions/ 12663576/रोक-स्क्रॉल-बाउंस-द-द-बॉडी-एलिमेंट-लेकिन--------बच्चे-तत्व-इन-io – Ben

लेकिन मुझे लगता है कि – Ben

मैं व्यूपोर्ट के उछाल वाली रोकने के लिए एक सीएसएस वैकल्पिक हल खोजने के लिए प्रबंधित किया है। कुंजी को 3 divs में सामग्री को लपेटना था -webkit-touch-overflow: उन पर लागू स्क्रॉल। अंतिम div में 101% की न्यूनतम ऊंचाई होनी चाहिए। इसके अतिरिक्त, आपको अपने डिवाइस के आकार का प्रतिनिधित्व करने वाले बॉडी टैग पर निश्चित चौड़ाई/ऊंचाइयों को स्पष्ट रूप से सेट करना चाहिए। मैंने शरीर पर एक लाल पृष्ठभूमि को यह दिखाने के लिए जोड़ा है कि यह वह सामग्री है जो अब उभर रही है और मोबाइल सफारी व्यूपोर्ट नहीं है।

नीचे स्रोत कोड और यहां एक प्लंकर है (यह आईओएस 7 जीएम पर भी परीक्षण किया गया है)। http://embed.plnkr.co/NCOFoY/preview

यदि आप इसे आईफोन 5 पर एक पूर्ण-स्क्रीन ऐप के रूप में चलाने का इरादा रखते हैं, तो ऊंचाई को 1136px में संशोधित करें (जब सेब-मोबाइल-वेब-ऐप-स्टेटस-बार-शैली 'ब्लैक-पारदर्शी' पर सेट हो या 1096px जब 'काला' पर सेट)। मोबाइल सफारी के क्रोम को ध्यान में रखे जाने के बाद 920x व्यूपोर्ट की ऊंचाई है)।

<!doctype html> 
<html> 

<head> 
    <meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no" /> 
    <style> 
     body { width: 640px; height: 920px; overflow: hidden; margin: 0; padding: 0; background: red; } 
     .no-bounce { width: 100%; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; } 
     .no-bounce > div { width: 100%; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; } 
     .no-bounce > div > div { width: 100%; min-height: 101%; font-size: 30px; } 
     p { display: block; height: 50px; } 
    </style> 
</head> 

<body> 

    <div class="no-bounce"> 
     <div> 
      <div> 
       <h1>Some title</h1> 
       <p>item 1</p> 
       <p>item 2</p> 
       <p>item 3</p> 
       <p>item 4</p> 
       <p>item 5</p> 
       <p>item 6</p> 
       <p>item 7</p> 
       <p>item 8</p> 
       <p>item 9</p> 
       <p>item 10</p> 
       <p>item 11</p> 
       <p>item 12</p> 
       <p>item 13</p> 
       <p>item 14</p> 
       <p>item 15</p> 
       <p>item 16</p> 
       <p>item 17</p> 
       <p>item 18</p> 
       <p>item 19</p> 
       <p>item 20</p> 
      </div> 
     </div> 
    </div> 

</body> 

</html>

स्रोत

2013-09-16 12:07:43 romiem

'css' को 'body' में थोड़ा सा बदल रहा है { स्थिति: पूर्ण; शीर्ष: 0 पीएक्स; बाएं: 0 पीएक्स; चौड़ाई: 640 पीएक्स; ऊंचाई: 100%; छिपा हुआ सैलाब; मार्जिन: 0; पैडिंग: 0; } 'इसे डिवाइस को स्वतंत्र बनाता है। –

पृष्ठ पर समर्पित div के भीतर किसी ऑब्जेक्ट पर स्क्रॉलिंग को प्रतिबंधित करने का प्रयास करते समय यह मेरे लिए काम नहीं करता था। मुझे यकीन नहीं है कि यह भी संभव है। – cbmtrx

यहां इस पर एक बड़ा ब्लॉग पोस्ट नहीं है:

http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/

एक डेमो यहाँ के साथ साथ:

http://www.kylejlarson.com/files/iosdemo/

सारांश में, आप एक पर निम्न का उपयोग कर सकते div में आपकी मुख्य सामग्री है:

.scrollable { 
    position: absolute; 
    top: 50px; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch; 
}

समस्या जो मुझे लगता है कि आप वर्णन कर रहे हैं वह तब है जब आप पहले से शीर्ष पर मौजूद एक div के भीतर स्क्रॉल करने का प्रयास करते हैं - फिर यह div की बजाय पृष्ठ को स्क्रॉल करता है और बाउंस प्रभाव के शीर्ष पर होता है पृष्ठ। मुझे लगता है कि आपका सवाल यह पूछ रहा है कि इससे कैसे छुटकारा पाना है?

इसे ठीक करने के लिए, लेखक सुझाव देता है कि आप स्क्रॉल करने योग्य divs की ऊंचाई बढ़ाने के लिए ScrollFix का उपयोग करें।

यह भी ध्यान देने योग्य है कि उपयोगकर्ता को स्क्रॉल करने से रोकने के लिए आप निम्न का उपयोग कर सकते हैं उदा। एक नेविगेशन तत्व में:

document.addEventListener('touchmove', function(event) { 
    if(event.target.parentNode.className.indexOf('noBounce') != -1 
|| event.target.className.indexOf('noBounce') != -1) { 
    event.preventDefault(); } 
}, false);

दुर्भाग्य से वहाँ अभी भी ScrollFix के साथ कुछ मुद्दों (जैसे जब प्रपत्र फ़ील्ड्स का उपयोग) हैं, लेकिन ScrollFix पर मुद्दों सूची एक अच्छी जगह विकल्प के लिए देखने के लिए है। this issue में कुछ वैकल्पिक दृष्टिकोणों पर चर्चा की जाती है।

अन्य विकल्प भी ब्लॉग पोस्ट में उल्लेख किया है, Scrollability और iScroll

स्रोत

2013-09-20 15:36:16

iScroll का उपयोग करने में समस्या यह है कि आप मूल स्क्रॉलिंग का उपयोग नहीं कर रहे हैं - जिसका अर्थ है कि iScroll बहुत कम प्रदर्शनकारी है। मेरा समाधान एक शुद्ध सीएसएस समाधान है जिसमें कोई जेएस निर्भरता नहीं है। – romiem

सुनिश्चित करें कि यह शुद्ध सीएसएस में बेहतर है। लेकिन मैं इसे काम करने के लिए प्रबंधन नहीं कर सका। Kylejlarson वास्तव में iscroll का उपयोग नहीं करता है; वैसे भी एक संक्षिप्त फिक्स – Ben

वैसे भी ... यह क्रोम चीज एक समस्या नहीं होनी चाहिए। इस पर नफरत सेब; भले ही यह इतना बड़ा सौदा न हो – Ben

हैं आप

$('*').not('#div').bind('touchmove', false);

यदि आवश्यक हो तो

$('#div').bind('touchmove');

टिप्पणी है कि सब कुछ # छोड़कर तय हो गई है इस ऐड की कोशिश कर सकते div

स्रोत

2014-10-24 23:46:23

क्या आपने कोशिश की? काम किया ? – Ben

शायद यह बेहतर काम 'कोड' $ (दस्तावेज़)। बाइंड ("टचमोव", फ़ंक्शन (ई) { e.preventDefault(); }); $ ("# scrollable_div")। ('Touchmove', फ़ंक्शन (ई) { e.stopPropagation(); }); 'कोड' –

थोड़ा jsfiddle? – Ben

body { 
    position: fixed; 
    height: 100%; 
}

स्रोत

2016-04-20 13:25:56

हालांकि यह कोड प्रश्न का उत्तर दे सकता है, _why_ और/या _how_ के संबंध में अतिरिक्त संदर्भ का उत्तर देता है, यह प्रश्न इसके दीर्घकालिक मान में काफी सुधार करेगा। कुछ स्पष्टीकरण जोड़ने के लिए कृपया अपना उत्तर संपादित करें। –

मोबाइल ओवरफ़्लो: स्क्रॉल और ओवरफ़्लो-स्क्रॉलिंग: स्पर्श करें रोकें "बाउंस"

उत्तर

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