화살표 키로 FF에서 페이지 스크롤을 비활성화하는 방법

Question

주제와 항목이있는 메뉴를 작성 중입니다. 각 주제는 클릭하여 펼치거나 접을 수 있습니다. 내 임무는 위쪽 및 아래쪽 화살표 키를 사용하여 메뉴 항목 및 항목을 이동할 수 있도록하는 것입니다. 나는 이미 이것을했지만 문제는 페이지가 창보다 크면 화살표 키를 누를 때 페이지가 스크롤된다는 것입니다. 나는 시도했다 :

document.body.style.overflow = "hidden"; 

스크롤에서 페이지를 중지하려면. 따라서 'Topic2'를 클릭하면 예를 들어 화살표 키를 사용하여 다음 주제/항목으로 이동할 수 있습니다. 그 후 화면의 아무 곳이나 클릭하면 자동으로 오버플로를 설정하고 페이지를 다시 스크롤 할 수 있습니다.

IE에서는 작동하지만 FF에서는 작동하지 않습니다. FF에서는 스크롤 막대가 제거되고 마우스 휠은 페이지를 스크롤하지 않지만 화살표 키는 여전히 수행합니다. 그래서 내 질문에, 어떻게 해결할 것입니다 또는 더 나은, 어떤 메뉴 요소에 포커스가있을 때 페이지를 스크롤하지 않는 방법? 따라서 오버 플로우 속성을 사용하지 않을 것입니다.

Answer 1

keydown 이벤트를 문서에 바인드해야하며 이벤트 키 코드가 화살표 키 (37 - 40) 중 하나와 일치하면 false를 반환합니다. 그런 식으로 화살 언론은 더 이상 가지 않을 것입니다. 당신은 쉽게 메뉴가 활성화되어 있지만, 그 중 일부를 보지 않고 코드의 경우에만 작동이에 확장 할 수 있습니다

document.onkeydown = function(e) { 
    var k = e.keyCode; 
    if(k >= 37 && k <= 40) { 
     return false; 
    } 
} 

, 그것은 당신에게 예를 제공하는 것은 불가능하다.

Answer 2

내가 볼 수있는 유일한 방법은 keydown 이벤트를 가로 채고 흐리게 처리하는 것입니다.

이러한 키를 잡는 데 약간의 어려움이있는 것 같습니다. 매우 유망 해 보이는 수많은 (JQuery 기반) 예제는 this question을 참조하십시오. 코드 아래

Answer 3

는 이 답변 주셔서 감사합니다, 문제

$(window).scroll(function() { 
    window.scrollTo(0,0); 
});