शरीर की अतिप्रवाह छिपी हुई स्थिति के साथ चलने वाली स्थिर स्थिति वाले तत्व

Question

मैं एक मॉडल परत खोलना चाहता हूं जो शरीर स्क्रॉल को पीछे छोड़ देता है। इसे पूरा करने के लिए, जब परत दिखायी जाती है तो मैं मोडल परत पर स्क्रॉल करने के लिए शरीर को अतिप्रवाह और ओवरफ़्लो पर सेट कर रहा हूं। दृश्यमान, एक स्क्रॉलबार दूसरे को बदल देता है।

पृष्ठभूमि में मेरे पास निश्चित स्थिति और 100% चौड़ी वाला शीर्ष बार है। क्या होता है जब शरीर का अतिप्रवाह छिपाने के लिए सेट होता है, 100% चौड़ाई div (शीर्ष बार) स्क्रॉलबार स्थान लेता है और इसके तत्व दाईं ओर जाते हैं।

मैं उन तत्वों को आगे बढ़ने से कैसे रोक सकता हूं?

मैंने स्क्रॉलबार की चौड़ाई (जावास्क्रिप्ट) की गणना करने की कोशिश की और शरीर को ओवरफ़्लो सेट करते समय: छुपाएं, मार्जिन-दाएं दें: शीर्ष पट्टी पर "स्क्रॉलबार चौड़ाई" दें। वह काम नहीं किया।

ने शीर्ष बार के दाईं ओर एक डमी div को स्क्रॉल करने के लिए अतिप्रवाह सेट के साथ भी कोशिश की और परत खोले जाने पर स्क्रॉल बार प्रदर्शित करने के लिए मजबूर किया। विचार था कि लापता स्क्रॉलबार की जगह एक और स्क्रॉलबार के साथ, केवल शीर्ष कंटेनर पर लेना था। यह लगभग काम किया लेकिन 1 या 2 पीएक्स झिलमिलाहट बनाया। बहुत अच्छा नहीं।

jsFiddle here with the basic problem

var body = $('body'), 
main = $('.main'), 
open_modal = $('.open-modal'), 
close_modal = $('.close-modal'), 
modal_container = $('.modal-container'), 
toggleModal = function() { 
    body.toggleClass('body-locked'); 
    modal_container.toggleClass('dp-block'); 
}; 

open_modal.on('click', toggleModal); 
close_modal.on('click', toggleModal); 

Answer 1

मूल रूप से ...

• जब मोडल खोला जाता है, मेनू चौड़ाई के लिए इसे वर्तमान चौड़ाई सेट और एक window.onresize ईवेंट हैंडलर जो शरीर की चौड़ाई के लिए मेनू का आकार बदलेंगे निर्धारित किया है।

• जब मोडल बंद कर दिया है, निश्चित चौड़ाई और window.onresize प्रबंधक को निकाल और मेनू वापस जाने के लिए यह प्रारंभिक अवस्था में है।

---

less === more की भावना में मैं के रूप में ज्यादा के रूप में मैं कर सकते हैं अपने कोड को सरल बनाने की स्वतंत्रता लिया है।

var body = $('body'); 
 
var menu = $('#topBarFixed'); 
 

 
function toggleModal() { 
 
    menu.css('width', body.hasClass('locked') ? '' : menu.width()); 
 
    window.onresize = body.hasClass('locked') ? '' : function() { 
 
     menu.css('width', body.width()); 
 
    } 
 
    body.toggleClass('locked'); 
 
} 
 

 
body.on('click', '.open-modal, .close-modal', toggleModal);

body { 
 
    padding-top: 40px; 
 
    height: 1000px; 
 
    background: lightblue; 
 
} 
 

 
body.locked { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.modal-container { 
 
    display: none; 
 
    overflow-y: scroll; 
 
    position: fixed; 
 
    top: 0; right: 0; 
 
    height: 100%; width: 100%; 
 
    background-color: rgba(255, 255, 255, 0.3); 
 
    z-index: 400; 
 
} 
 

 
body.locked .modal-container { 
 
    display: block !important; 
 
} 
 

 
.modal { 
 
    height: 600px; 
 
    width: 200px; 
 
    margin: 50px auto; 
 
    background: indianred; 
 
} 
 

 
#topBarFixed { 
 
    width: 100%; 
 
    background-color: lightgray; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    text-align:center; 
 
    display: inline-block; 
 
    z-index: 200; 
 
} 
 

 
.topBarContent { 
 
    display: inline-flex; 
 
    flex-direction: row; 
 
    flex-wrap: nowrap; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 

 
.inner1 { 
 
    width:30px; 
 
    line-height: 40px; 
 
} 
 

 
.open-modal { 
 
    position: relative; 
 
    top: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id="topBarFixed"> 
 
    <div class="topBarContent"> 
 
     <div id="inner" class="inner1">div</div> 
 
     <div id="inner" class="inner1">div</div> 
 
     <div id="inner" class="inner1">div</div> 
 
     <div id="inner" class="inner1">div</div> 
 
     <div id="inner" class="inner1">div</div> 
 
    </div> 
 
</div> 
 

 

 
<p>Scroll down to open layer</p> 
 
<button class="open-modal">Open layer</button> 
 

 

 
<div class="modal-container"> 
 
    <div class="modal"> 
 
     <button class="close-modal">Close layer</button> 
 
    </div> 
 
</div>

Answer 2

यहां आपकी समस्या topBarFixed एक 100% चौड़ाई किया है। यदि यह चौड़ाई तय की गई तो आपको यह समस्या नहीं होगी। निम्नलिखित Chrome और Firefox पर परीक्षण किया गया:

अपने toggleModal समारोह की पहली लाइन के लिए इस लाइन में जोड़ें:

$(".topBarFixed").width($(".topBarFixed").width());

यही पर पट्टी की वास्तविक चौड़ाई को चौड़ाई (पिक्सेल में) स्थापित करेगा उस बिंदु पर। फिर जब आप परत बंद करते हैं, तो इसे वापस 100% पर सेट करें।

close_modal.on('click', function() { toggleModal(); $(".topBarFixed").width("100%"); }); 

पूरे कोड लगता है:

var body = $('body'), 
    main = $('.main'), 
    open_modal = $('.open-modal'), 
    close_modal = $('.close-modal'), 
    modal_container = $('.modal-container'), 
    toggleModal = function() { 
     $(".topBarFixed").width($(".topBarFixed").width()); 
     body.toggleClass('body-locked'); 
     modal_container.toggleClass('dp-block'); 
    }; 

open_modal.on('click', toggleModal); 
close_modal.on('click', function() { toggleModal(); $(".topBarFixed").width("100%"); }); 

और यहाँ jsFiddle है: http://jsfiddle.net/wmk05t0b/5/

संपादित

वैकल्पिक रूप से, तुम सिर्फ एक निश्चित चौड़ाई के साथ आ सकता है, और वह चाल करेगा:

.topBarFixed 
{ 
    width:715px; /*changed from 100%*/ 
    height: 40px; 
    background-color: lightgray; 
    position: fixed; 
    top: 0; 
    left: 0; 
    text-align:center; 
    display: inline-block; 
    z-index: 200; 
} 

Answer 3

आपके कोड में कुछ त्रुटियां: id केवल एक है। कक्षाओं का प्रयोग करें यदि आप एक ही शैली को अधिक तत्वों में लागू करना चाहते हैं।

<div class="topBarContent"> 
    <div class="inner1">div</div> 
    <div class="inner1">div</div> 
    <div class="inner1">div</div> 
    <div class="inner1">div</div> 
    <div class="inner1">div</div> 
</div> 

वैसे भी, यह आपकी समस्या का कारण नहीं है। सबसे पहले, आपके शरीर का ओवरफ़्लो पर्याप्त होना चाहिए: अपने .modal-container पर एक अतिप्रवाह जोड़ें, जब तक आप पृष्ठभूमि पृष्ठ को स्क्रॉल करने से रोकना नहीं चाहते हैं, जबकि मोडल खुला है। दूसरा, मोडल को स्वयं ठीक करें, और केंद्रित सीएसएस चाल का उपयोग करके इसे केंद्रित करें (बाएं: 50%, मार्जिन-बाएं: - आपकी आधा चौड़ाई)। सीएसएस: ।बॉडी लॉक { अतिप्रवाह: स्क्रॉल; }

.modal-container { 
    overflow:hidden; 
    position:fixed; 
    display: none; 
    top: 0; right: 0; 
    height: 100%; width: 100%; 
    background-color: rgba(255, 255, 255, 0.3); 
    z-index: 400; 
} 

.modal { 
    position: fixed; 
    height: 600px; 
    width: 200px; 
    margin: 50px auto 50px -100px; 
    background: indianred; 
    left:50%; 
} 
/*Reset your body, you never know*/ 
body { 
    margin:0; 
    padding:0 
} 

आशा है कि यह मदद करता है।