स्क्रॉलिंग से पृष्ठ को रोकें यदि div

Question

हो रहा है मेरे पास एक div है जो स्क्रॉल करने योग्य है, लेकिन जब भी आप इसके नीचे/ऊपर पहुंचते हैं, तो यह पूरे पृष्ठ को स्क्रॉल करना शुरू कर देता है। यह उन उपयोगकर्ताओं के लिए परेशान हो सकता है जो तेजी से स्क्रॉल करते हैं, और फिर पूरा पृष्ठ अनपेक्षित रूप से स्क्रॉल करना शुरू कर देता है।

मुझे कुछ चाहिए जहां आप div पर होवर कर रहे हैं, पृष्ठ स्क्रॉल करने योग्य नहीं है।

मैं जब मैं div हॉवर सीएसएस जोड़कर इस की कोशिश की है ...

body { 
    overflow:hidden; 
} 

... यह काम करता है लेकिन वहाँ एक समस्या है। स्क्रॉलबार गायब हो जाता है और यह गायब होने/फिर से दिखने के लिए बेवकूफ दिखता है। एक ही प्रभाव प्राप्त करने के लिए कोई तरीका है लेकिन स्क्रॉलबार दृश्यमान रखें? मैंने इसे फेसबुक चैट के साथ देखा है।

Answer 1

यहाँ एक बहुत ही सरल नहीं प्लगइन्स, बस jQuery के साथ प्रचार को रोकने के लिए रास्ता है सक्रिय करने के लिए एक नमूना है।

अद्यतन: कोड को IE9 + में सही तरीके से काम करने के लिए अद्यतन किया गया है। पिछले संस्करणों में परीक्षण नहीं किया है।

सबसे पहले, इस व्यवहार के रूप में चिह्नित करने के लिए अपने <div> पर एक कक्षा बनाएं। मेरे उदाहरण में, मैं कक्षा .Scrollable का उपयोग करता हूं।

<div class="Scrollable"> 
    <!-- A bunch of HTML here which will create scrolling --> 
</div> 

jQuery निष्क्रिय करने के लिए है:

$('.Scrollable').on('DOMMouseScroll mousewheel', function(ev) { 
    var $this = $(this), 
     scrollTop = this.scrollTop, 
     scrollHeight = this.scrollHeight, 
     height = $this.height(), 
     delta = (ev.type == 'DOMMouseScroll' ? 
      ev.originalEvent.detail * -40 : 
      ev.originalEvent.wheelDelta), 
     up = delta > 0; 

    var prevent = function() { 
     ev.stopPropagation(); 
     ev.preventDefault(); 
     ev.returnValue = false; 
     return false; 
    } 

    if (!up && -delta > scrollHeight - height - scrollTop) { 
     // Scrolling down, but this will take us past the bottom. 
     $this.scrollTop(scrollHeight); 
     return prevent(); 
    } else if (up && delta > scrollTop) { 
     // Scrolling up, but this will take us past the top. 
     $this.scrollTop(0); 
     return prevent(); 
    } 
}); 

संक्षेप में, क्या करता है किस दिशा स्क्रॉल में अनुरोध किया जा रहा है पता लगाने के लिए है (originalEvent.wheelDelta पर आधारित सकारात्मक = up, नकारात्मक = down)। यदि mousewheel ईवेंट का अनुरोध किया गया deltatop या के पीछे स्क्रॉलिंग को स्थानांतरित करेगा, तो ईवेंट रद्द करें।

आईई में, विशेष रूप से, स्क्रॉलिंग ईवेंट जो बाल तत्व के स्क्रोल करने योग्य क्षेत्र से पहले जाते हैं, फिर मूल तत्वों तक पहुंच जाते हैं, और स्क्रॉलिंग जारी होने की स्थिति के बावजूद जारी है। चूंकि हम किसी भी मामले में ईवेंट को रद्द करते हैं, और उसके बाद jQuery पर स्क्रॉलिंग को jQuery के माध्यम से नियंत्रित करते हैं, यह रोका जाता है।

यह इस बात पर आधारित है कि this question समस्या हल करता है, लेकिन प्लगइन की आवश्यकता नहीं है, और IE9 + के साथ क्रॉस-ब्राउज़र अनुपालन है।

Here is a working jsFiddle कोड-इन-एक्शन का प्रदर्शन।

Here is a working jsFiddle कोड में कार्रवाई का प्रदर्शन, और आईई के साथ काम करने के लिए अद्यतन किया गया।

Here is a working jsFiddle कोड में कार्रवाई का प्रदर्शन, और आईई और फ़ायरफ़ॉक्स के साथ काम करने के लिए अद्यतन किया गया। परिवर्तन की आवश्यकता के बारे में अधिक जानकारी के लिए this post देखें।

Answer 2

शायद

How to disable scrolling temporarily?

को एक नज़र इस बंद करो और स्क्रॉल