代码之家 › 专栏 › 技术社区 › MultiformeIngegno

将鼠标滚轮上的放松与箭头集成

jquery-easing easing addeventlistener jquery javascript

0

MultiformeIngegno · 技术社区 · 11 年前

我使用这个脚本来“修复”IE和Chrome在使用鼠标滚轮时无法连续平滑滚动的问题:

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“滚动”并应用轻松?

1 回复 | 直到 11 年前

1

Alvaro 11 年前

现场演示: http://jsfiddle.net/cZuym/39/

你只需要玩 keydown 事件和滚动的动画。请注意,现在变量 time 和 distance 是全局的:

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;
    }
});