jQuery/CSS: निश्चित ओवरले पृष्ठभूमि की स्क्रॉलिंग की अनुमति नहीं देनी चाहिए?

Question

मेरे पास एक ओवरले बॉक्स है जो स्क्रीन पर तय और केंद्रित है। पृष्ठ स्वयं लंबा है और एक लंबवत स्क्रॉलबार है।

ओवरले दिखाए जाने के बाद मैं पृष्ठ की स्क्रॉलिंग को अक्षम करना चाहता हूं। हालांकि मैं स्क्रॉल को पूरी तरह अक्षम नहीं कर सकता क्योंकि कुछ ओवरले में overflow-y:scroll स्वयं के लिए है। इसलिए ओवरले में सामग्री को स्क्रॉल किया जाना चाहिए, लेकिन पेज स्वयं ही अटक जाना चाहिए।

किसी भी विचार को jquery या css के साथ हल करने का तरीका है?

Answer 1

सबसे तेज़ और गंदे तरीके से मैं सोच सकता हूं कि स्क्रॉल ईवेंट के लिए विंडो में इवेंट श्रोता संलग्न करना है, और यदि आपका ओवरले दिखाई दे रहा है तो रोकें Default()।

ऐसा (jquery का उपयोग करके)।

window.addEventListener('scroll', function(e){ 
     var el = $('.overlay.active'); 

     if(el.length > 0){ 
      e.preventDefault(); 
     } 
    }); 

आशा है कि यह आपकी तलाश है।

Answer 2

आप अपने ओवरले को {position: fixed;} के रूप में स्थान दे सकते हैं। यह keep your overlay in your screen होगा भले ही आपका पृष्ठ स्क्रॉल हो।

Answer 3

आप body से overflow: hidden पर सेट कर सकते हैं। यह स्क्रॉलिंग को रोक देगा। बच्चे की अतिप्रवाह घोषणाएं अप्रभावित रहती हैं। मैंने थोड़ा fiddle किया है।

Answer 4

आप position: fixed के साथ एक पूर्ण चौड़ाई और पूर्ण ऊंचाई कंटेनर बना सकते हैं। और इस कंटेनर के अंदर जानकारी के साथ अपना वास्तविक ओवरले बनाएं। कंटेनर मूल रूप से उपयोगकर्ता को स्क्रॉल या पृष्ठ से बातचीत करने से अंधा कर देता है।

Answer 5

बस मार्क के jQuery समाधान के लिए एक समायोजन। मेरा कोड शरीर स्क्रॉल को ओवरले के रूप में अक्षम करता है, फिर जब शरीर या ओवरले बंद बटन क्लिक किया जाता है, तो शरीर स्क्रॉल पुनः सक्षम होता है।

/*We disable the scroll*/ 

$(function() { 
/*This is where we specify what button is being clicked to open the 
overlay, change at will.*/ 
$('#overlay1').click(function() {  
/*This is where we specify what part of the page is gonna disable the 
scroll, in this case the body.*/ 
    $('body') 
     .css('overflow', 'hidden'); 
    }); 

/*Now we re-enable the scroll*/ 

/*This is where we specify the the part of the overlay that is being 
clicked to close it, in this case, the body and the .close, change at will.*/ 
$('body, .close').click(function() { 
/*This is where we specify the part of the page we are re-enabling 
the scroll, in this case the body.*/ 
    $('body') 
     .css('overflow', 'visible'); 
    }); 
}); 

मेरी स्क्रिप्ट में कार्रवाई में थोड़ा JSFiddle है।