Question

我希望尝试使用Waypoints和Stellar jQuery插件添加一些键盘导航。我有所有设置的平滑滚动，因此当您单击链接时，它会将您带到相应的数据滑动位置。

我正在尝试实施键盘导航，以便在按下向上和向下键时，它会转到下一个或上一个数据幻灯片。我以为自己走在了正确的轨道上，但似乎并没有走到一起。

看起来我正在使keydown函数正常工作，但不是滚动到相应的数据滑动位置。

非常感谢任何帮助！谢谢！

Waypoint / Smooth Scroll Nav

slide.waypoint(function (event, direction) {

    dataslide = $(this).attr('data-slide');

    if (direction === 'down') {
        $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
    }
    else {
        $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
    }

});

mywindow.scroll(function () {
    if (mywindow.scrollTop() == 0) {
        $('.navigation li[data-slide="1"]').addClass('active');
        $('.navigation li[data-slide="2"]').removeClass('active');
    }
});

function goToByScroll(dataslide) {
    htmlbody.animate({
        scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
    }, 2000, 'easeInOutQuint');
}

links.click(function (e) {
    e.preventDefault();
    dataslide = $(this).attr('data-slide');
    goToByScroll(dataslide);
});

button.click(function (e) {
    e.preventDefault();
    dataslide = $(this).attr('data-slide');
    goToByScroll(dataslide);

});

我的键盘导航代码：

 mywindow.keydown(function(e) {
    if(e.keyCode == 40) { //DOWN
        e.preventDefault();
        alert('Down Arrow Has Been Pressed');
        goToByScroll();
    }
    else if (e.keyCode == 38) { //UP
        e.preventDefault();
        alert('Up Arrow Has Been Pressed');
        goToByScroll();
    }       
});

Answer 1

当您使用键盘导航时，您没有使用参数调用goToByScroll函数 - 看起来这就是它无法正常工作的原因。您需要跟踪自己的活动数据滑块，以便将该变量传递给密钥处理程序中的goToByScroll函数。

它看起来像这样（这真的很粗糙）：

var currentDataSlide = 0;

function goToByScroll(dataslide) {
    htmlbody.animate({
        scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
    }, 2000, 'easeInOutQuint');

    currentDataSlide = dataslide;
}
mywindow.keydown(function(e) {
    if(e.keyCode == 40) { //DOWN
        e.preventDefault();
        alert('Down Arrow Has Been Pressed');
        goToByScroll(currentDataSlide + 1);
    }
    else if (e.keyCode == 38) { //UP
        e.preventDefault();
        alert('Up Arrow Has Been Pressed');
        goToByScroll(currentDataSlide - 1);
    }       
});

这并不完美，但我们的想法是跟踪你的位置（滑动方式），并在使用键控器时传递该变量。

使用键盘导航平滑滚动

1 个答案: