I use this script to "fix" the problem of IE and Chrome not having a continous smooth scroll when using mouse wheel:
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)
What I'd like to have is integrate also the arrow keys in this. How do I rewrite this script adding the eventListener of arrow keys "scrolling" and applying the easing?
Living demo: http://jsfiddle.net/cZuym/39/
You just have to play with the
keydown
event and the animation of the scroll. Note that now the variablestime
anddistance
are globals: