स्क्रॉल करने योग्य div

Question

में बाहरी स्क्रॉलिंग को अक्षम करें मेरे पास कुछ divs हैं जिनके पास आप स्क्रॉल कर सकते हैं। लेकिन जब आप ऊपर या नीचे हिट करते हैं तो यह ब्राउज़र स्क्रॉल में बदल जाता है जो पूरे पृष्ठ को स्क्रॉल करता है।

मैं बाहरी स्क्रॉलिंग को अक्षम करना चाहता हूं जबकि माउस इस विशेष div के अंदर है (इस प्रकार के div में से तीन है)।

मैं जो प्रयास करने की कोशिश कर रहा हूं उसका एक उदाहरण यूट्यूब प्लेलिस्ट चयनकर्ता है।

Here's an example at youtube अपने माउस को लोकप्रिय अपलोड भाग के अंदर घुमाएं और ऊपर और नीचे सभी तरह स्क्रॉल करने का प्रयास करें।

संपादित करें: बस किसी अन्य ब्राउज़र में लिंक का उपयोग करने का प्रयास किया गया है और वीडियो चयन भाग दिखाई नहीं दे रहा है, लेकिन यह "प्लेलिस्ट में जोड़ें" भाग है जो इसे सक्षम बनाता है।

क्या कोई इसे करने का तरीका जानता है?

Answer 1

यहाँ एक FIDDLE

<div> 
    ... some content ... 
</div> 

---

div { 
    height: 400px; 
    overflow: scroll; 
} 

---

$('div').on('mousewheel DOMMouseScroll', function(e) { 
    var scrollTo = null; 

    if(e.type === 'mousewheel') { 
    scrollTo = (e.originalEvent.wheelDelta * -1); 
    } 
    else if(e.type === 'DOMMouseScroll') { 
    scrollTo = 40 * e.originalEvent.detail; 
    } 

    if(scrollTo) { 
    e.preventDefault(); 
    $(this).scrollTop(scrollTo + $(this).scrollTop()); 
    } 
}); 

है

Answer 2

untested है, लेकिन इस सवाल का जवाब हो सकता है:

$("div").scroll(function(event) { 
    event.stopPropagation();//Do not bubble up the DOM, do not scroll document. 
}); 

stopPropagation() डोम खलबली मचाने वाले की घटना को रोकने के लिए प्रयोग किया जाता है। इस तरह अन्य तत्वों को इस घटना के बारे में अधिसूचित नहीं किया गया है।

और अधिक पढ़ें: http://api.jquery.com/event.stoppropagation/