부모 창에서 스크롤을 끄는 방법?

Question

많은 옵션이있는 <select> 상자가 있습니다.이 상자를 스크롤 할 수 있습니다. 옵션 목록의 맨 아래로 스크롤하여 스크롤을 계속하면 스크롤이 상위 창으로 "오버플로"되고 대신 창을 아래로 스크롤합니다. 이 기능을 사용 중지하는 방법이 있습니까? 예 : 맨 아래로 스크롤 할 때 아래로 스크롤하면 사용이 중지됩니까?

Here은 바이올린입니다. 설명하는 효과를 얻으려면 여러 항목을 마우스로 선택한 다음 트랙 패드, 스크롤 휠 등을 사용하여 아래로 스크롤 한 다음 스크롤을 계속하십시오. 전체 페이지가 스크롤됩니다. 원하는 옵션의 맨 아래에 도달하면 전체 페이지가 스크롤되지 않도록 원하는 동작이 있습니다.

Answer 1

원하는 것을 얻는 유일한 방법은 자바 스크립트를 사용하는 것입니다. 논리는 매우 간단합니다. hover에 overflow: hidden;을 본문에 추가 한 다음 select 요소의 onblur을 추가하면 overflow 값이 제거됩니다.

같이 보일 (당신의 선택 상자를 selectbox의 ID를 제공) 할 코드 :

document.getElementById('selectbox').onmouseenter = function(){ 
    document.body.style.overflow = 'hidden'; 
}; 

document.getElementById('selectbox').onmouseout = function(){ 
    document.body.style.overflow = 'auto'; 
}; 

데모 : http://jsfiddle.net/LRCKn/6/ - 당신은 단지 그것뿐만 아니라 옵션 요소에 CSS의 변경 사항을 적용 할 얻을 필요 .