2009-12-27 6 views
3

세로 스크롤 막대가있는 작은 div 상자가 있고 세로 스크롤 막대가있는 html 페이지 안에 있습니다.div 상자 스크롤 후 스크롤 할 창을 방지합니다.

내 문제는 사용자가 작은 DIV 상자 스크롤의 끝에 도달하면 div 상자가 들어있는 전체 html 페이지가 스크롤되기 시작합니다 (사용자가 마우스 스크롤을 통해 스크롤하는 것으로 가정하고 DIV를 실제로 클릭하여 상자 스크롤 버튼 자체)

사용자가 내 작은 DIV 상자 스크롤의 끝에 도달하면 전체 HTML 페이지가 스크롤되지 않도록하는 방법이 있습니까? 어떤 도움을 많이 주시면 감사하겠습니다! 고맙습니다!

나는이 시도했다 (그러나 심지어 사업부 상자 스크롤 취소됩니다) : 그렇지 않은 경우

if (window.addEventListener) 
    /** DOMMouseScroll is for mozilla. */ 
    window.addEventListener('DOMMouseScroll', handleWheelEvent, false); 
/** IE/Opera. */ 
window.onmousewheel = document.onmousewheel = handleWheelEvent; 

function handleWheelEvent(e){ 
    e.preventDefault(); 
} 

답변

1

난 당신의 코드와 문제에 너무 많이 보이지 않았다,하지만 난에 이동하기 전에 제안을 던져 원 : 여기에 몇 가지 코드 예제와 함께 링크입니다 P.

window.addEventListener

document.onmousewheel = handleWheelEvent;

은 일반적으로 전체 문서 작업을 적용하는 좋은 방법이지만 특정 값 (이 경우 scroll = false)을 특정 요소에 적용하려면 해당 참조를 설정해야합니다 특정 참조 (즉, getElementById()는 문서의 요소에만 적용됩니다).

Idk - 어쩌면 도움이 될지 모르지만 그렇지 않을 수도 있습니다. 행운을 빕니다.

-j

0

당신은 handleWheelEvent 기능을 수정하고 e 이벤트의 srcElement 속성을 확인하고 preventDefault()를 호출해야합니다 DIV 상자를 스크롤합니다.

http://www.webdeveloper.com/forum/archive/index.php/t-158824.html

+0

감사 pygorex1 내가 걸린 링크를 봐, 당신의 어려움을 이해하는 데 어려움을 겪고 있습니다. 해결책. 나는 약간의 초보자입니다. handleWheelEvent 함수를 수정하는 방법과 div 상자에서 오는지를 결정하는 방법에 대해 자세히 설명 할 수 있습니까? – Rees

-1

나는 비슷한 문제가있었습니다. 구글이 나를 여기로 이끌었다. 4 년 만에 1700 건이 넘는 불완전한 대답이있었습니다. 솔루션을 코딩하고 나면 JSFiddle에서 팝업하여 공유 할 것입니다. 안하는 것보다 늦게하는 것이 낫다.

MacOSX/Chrome에서 테스트되었습니다.

http://jsfiddle.net/mF8Pr/

내 문제는 라이트 박스 내에서 텍스트 영역 내에서 스크롤 할 수있는, 오버레이 아래 페이지의 나머지 부분에 스크롤을 해제하고있었습니다.

  1. 바인드 마우스 휠 이벤트는 문서화
  2. 이벤트가 발생
  3. : 우리가 스크롤 갖고 싶어 OBJ (옵션 테스트가 반드시 오버레이가 표시되어 있는지 확인하기 위해)
  4. 검사 대상은 0 < OBJ 확인
  5. 을 활성화 .scrollTop < (obj.scrollHeight - obj.clientHeight)
  6. 시도한 스크롤 이벤트의 방향을 확인하십시오 .originalEvent.== == 제외
  7. DOWN을
    • UP를 deltaY에 긍정적
  8. 에서는 event.preventDefault()

    $(document).bind('mousewheel', function(e){ 
        //if($overlay.is(':visible')) 
        { 
        if(e.target != null && e.target.type != 'textarea') 
        { 
         e.preventDefault(); 
        } 
        else 
        { 
         if(e.originalEvent.deltaY < 0 && e.target.scrollTop == 0) 
         { 
         e.preventDefault(); // already at top 
         } 
         else if(e.originalEvent.deltaY > 0 && e.target.scrollTop >= 
          (e.target.scrollHeight - e.target.clientHeight)) 
         { 
         // must use greater than because sometimes 
         // the math is wrong by 1px   
         e.preventDefault(); // already at bottom 
         } 
        } 
        } 
    }); 
    

아만다