는 마우스 휠을 사용할 때 IE와 크롬은 지속적인 부드러운 스크롤이 없기 때문에 문제를 "해결"을 화살표

Question

나는이 스크립트를 사용

와 마우스 휠에 용이하게 통합 :

if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false); 
window.onmousewheel = document.onmousewheel = wheel; 

function wheel(event) { 
    var delta = 0; 
    if (event.wheelDelta) delta = event.wheelDelta/120; 
    else if (event.detail) delta = -event.detail/3; 

    handle(delta); 
    if (event.preventDefault) event.preventDefault(); 
    event.returnValue = false; 
} 

function handle(delta) { 
    var time = 1000; 
    var distance = 260; 

    $('html, body').stop().animate({ 
     scrollTop: $(window).scrollTop() - (distance * delta) 
    }, time); 
} 

(JSFIDDLE)

무엇 나는 이것에 화살표 키를 통합하고 싶습니다. 이 스크립트를 어떻게 다시 작성하여 화살표 키의 eventListener를 "스크롤링"하고 이징을 적용합니까?

Answer 1

생활 데모 : http://jsfiddle.net/cZuym/39/

당신은 방금 keydown 이벤트와 스크롤의 애니메이션을 재생합니다.

if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false); 
window.onmousewheel = document.onmousewheel = wheel; 

var time = 1000; 
var distance = 300; 

function wheel(event) { 
    if (event.wheelDelta) delta = event.wheelDelta/120; 
    else if (event.detail) delta = -event.detail/3; 

    handle(); 
    if (event.preventDefault) event.preventDefault(); 
    event.returnValue = false; 
} 

function handle() { 

    $('html, body').stop().animate({ 
     scrollTop: $(window).scrollTop() - (distance * delta) 
    }, time); 
} 


$(document).keydown(function (e) { 

    switch (e.which) { 
     //up 
     case 38: 
      $('html, body').stop().animate({ 
       scrollTop: $(window).scrollTop() - distance 
      }, time); 
      break; 

      //down 
     case 40: 
      $('html, body').stop().animate({ 
       scrollTop: $(window).scrollTop() + distance 
      }, time); 
      break; 
    } 
});