मोबाइल पर एक मोडल नेविगेशन मेनू कैसे बनाएं और बॉडी स्क्रॉलिंग को कैसे रोकें?

Question

मैंने कई समाधानों की जांच की और परीक्षण किया लेकिन मैं इसे अभी तक काम नहीं कर सकता। मैं चाहता हूं कि उपनिवेश मेनू (मोडल) दिखाए जाने पर स्क्रॉल करने में सक्षम हो, लेकिन शरीर नहीं।

मैंने कोशिश की:

1: जावास्क्रिप्ट सीएसएस संपत्ति को बदलने "निर्धारित" करने के लिए जब मोडल खुला:

var main = document.getElementById('main'); 
main.setAttribute("style", "position: fixed;"); 

समस्या: आप पेज स्क्रॉल रहे हैं, तो जब आप मोडल खोलते हैं, तो पेज ऊपर जाता है (के रूप में "तय" भी मतलब है कि आप एक स्क्रॉल पट्टी नहीं हो सकता)

2: जावास्क्रिप्ट सीएसएस संपत्ति को बदलने के लिए "अतिप्रवाह छिपा" जब मोडल खुला:

+०१२३५१६४१०६१

document.body.setAttribute("style", "overflow: hidden;"); 

समस्या: मोबाइल पर काम नहीं करता है, फिर भी स्क्रॉल (मैं एंड्रॉइड का उपयोग करता हूं)।

3: जावास्क्रिप्ट को अक्षम करने स्पर्श इवेंट:

var main = document.getElementById('main'); 
main.addEventListener('touchstart', function(e){ e.preventDefault(); }); 
main.addEventListener('scroll', function(e){ e.preventDefault();}); 
main.addEventListener('touchmove', function(e){ e.preventDefault();}); 

समस्या: को छोड़कर अगर आप subnavigation मेनू के भीतर से छू शुरू काम करता है।

देखें इस बेहतर मैं क्या मतलब समझने के लिए: http://i45.tinypic.com/ajl3rt.png

फिर, कैसे शरीर एक मोबाइल डिवाइस में स्क्रॉल को रोकने के लिए एक उपरिशायी मेनू प्रदर्शित किया जाता है जब?

Answer 1

मुझे एक समान समस्या थी। आम तौर पर अतिप्रवाह: छुपा डेस्कटॉप पर इसे पूरा करता है। मोबाइल के लिए आपको निश्चित स्थिति लागू करने की भी आवश्यकता होगी। इसलिए, जब आपका संवाद सक्रिय होता है, तो शरीर में ".noscroll" कक्षा जोड़ें:

body.noscroll{ 
overflow:hidden; 
position:fixed; 
}