स्क्रॉलिंग अक्षम करें लेकिन स्क्रॉलबार सीएसएस

Question

मुझे इसका समाधान नहीं मिल रहा है, यहां एक प्रश्न था, लेकिन उत्तर बहुत कम उपयोग नहीं कर रहे हैं (कम से कम मेरे लिए)।

मेरे पास एक जावास्क्रिप्ट मोडल पॉप-अप है जो पृष्ठ पर पारदर्शी div डालकर पृष्ठभूमि पर सबकुछ अक्षम करता है। यह अतिप्रवाह को छिपाने के लिए स्क्रॉलिंग को भी अक्षम करता है, और ऐसा करना चाहिए, क्योंकि पृष्ठ माउस व्हील के साथ स्क्रॉल करने योग्य है और उपयोगकर्ता को परेशान करता है।

समस्या यह है कि स्क्रॉलबार को छिपाने और दिखाने के दौरान पृष्ठ का आकार बदलता है और प्रभाव बदसूरत है। साथ ही, मेरा पृष्ठ इस तरह से डिज़ाइन किया गया है कि यदि मैं इसे आकार देने से रोकता हूं तो यह बदसूरत होगा।

मैं चाहता हूं कि स्क्रॉलबार को अक्षम करना है, लेकिन इसे दृश्यमान रखें (पृष्ठ सामग्री स्क्रीन फिट से अधिक लंबी है)। क्या यह सीएसएस में किसी भी तरह से संभव है?

Answer 1

css बदलने के बजाय, जो scrollbar को हटा देगा, और जैसा कि आपने कहा है पृष्ठ के लेआउट को बदलें, इसके बजाय jquery function पर कॉल करने का प्रयास करें।

// call your pop up and inside that function add below 
$('body').on('scroll mousewheel touchmove', function(e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
     return false; 
}); 

फिर जब आप मोडल बंद करते हैं, एक ही फ़ंक्शन को कॉल लेकिन की जगह onoff

Answer 2

एक बार जब आप अपना पॉपअप दिखाना शुरू करते हैं, तो body एक कक्षा (जैसे popupOpen) दें। यह एक आसान कामकाज होना चाहिए।

.popupOpen { 
    overflow: hidden; 
    margin-right: 17px //size of the scrollbar in each browser 
} 

जब आप अपने पॉपअप बंद, बस body से वर्ग को हटा दें।