스크롤 할 수있는 div에서 외부 스크롤을 사용하지 않도록 설정하십시오.

Question

스크롤 할 수있는 정보가있는 div가 몇 개 있습니다. 그러나 맨 위나 맨 아래를 칠 때 전체 페이지를 스크롤하는 브라우저 스크롤러로 바뀝니다.

마우스가이 특정 div 안에있을 때 외부 스크롤을 비활성화하고 싶습니다 (이 유형의 div가 세 개 있습니다).

내가 달성하고자하는 예는 youtubes 재생 목록 선택기입니다.

Here's an example at youtube 인기있는 업로드 부분에 마우스를 가져 가면 위아래로 스크롤 할 수 있습니다.

EDIT : 다른 브라우저에서 링크를 사용하려했는데 비디오 선택 부분이 표시되지 않는 것처럼 보이지만이를 활성화하는 "재생 목록에 추가"부분입니다.

아무도이 작업을 수행하는 방법을 알고 있습니까?

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

테스트되지 않은,하지만 해답이 될 수 있습니다

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

인 stopPropagation()는 DOM을 버블 링 이벤트를 방지하기 위해 사용된다. 이 방법으로 다른 요소에이 이벤트가 통보되지 않습니다.

더 읽기 : http://api.jquery.com/event.stoppropagation/ 여기