javascript - Inaktivera scrollning utanför medan i scrollbar div

Jag har några divs som innehåller information som du kan scrolla igenom. Men när du når toppen eller botten ändras det till webbläsarens scroll som scrollar hela sidan.

Jag skulle vilja inaktivera rullning utanför medan musen är inne i denna specifika div (det finns tre av denna typ av div).

Ett exempel på vad jag försöker uppnå är Youtubes spellistväljare.

Här är ett exempel på YouTube. Håll musen över delen med populära uppladdningar och försök att scrolla hela vägen upp och ner.

REDIGERA: försökte precis använda länken i en annan webbläsare och delen för att välja video verkar inte visas, men det är delen 'lägg till i spellista' som gör det möjligt.

Vet någon ett sätt att göra detta?

Svar #1

Här är en 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());
  }
});

Svar #2

Otestad, men kan vara svaret:

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

stopPropagation() används för att förhindra att händelsen bubblar upp i DOM. På detta sätt blir andra element inte informerade om denna händelse.

Läs mer: http://api.jquery.com/event.stoppropagation/