Dezaktywuj przewijanie na zewnątrz podczas przewijania div

Question

Mam kilka elementów div, które przechowują informacje, które można przewijać. Ale kiedy trafisz w górę lub w dół, zmienia się na przewijanie przeglądarki, które przewija całą stronę.

Chciałbym wyłączyć przewijanie na zewnątrz, gdy mysz znajduje się wewnątrz tego div (są trzy tego typu div).

Przykładem tego, co próbuję osiągnąć, jest selektor listy odtwarzania youtubes.

Here's an example at youtube Umieść kursor myszy wewnątrz popularnej części przesyłania i przewijaj w górę iw dół.

EDYCJA: próbowałem użyć linku w innej przeglądarce, a część wyboru wideo wydaje się nie wyświetlać, ale jest to część "dodaj do listy odtwarzania", która ją włącza.

Czy ktoś wie, jak to zrobić?

Answer 1

Oto 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

Nietestowane, ale może być odpowiedź:

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

stopPropagation() służy do zapobiegania zdarzenie propagacji aż DOM. W ten sposób inne elementy nie są powiadamiane o tym wydarzeniu.

Więcej: http://api.jquery.com/event.stoppropagation/