键盘水平导航

KeyPress horizontal navigation

本文关键字：导航 水平 键盘      更新时间：2023-09-26

我正在尝试使用左/右箭头在我的网页上横向导航。

由于Firefox/Chrome处理默认箭头移动的方式不同，我不得不禁用默认移动(Firefox会向右移动20px)。

<script>
 window.addEventListener("keydown", function(e) {
// space and arrow keys
    if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
     }
}, false);  
</script>

然后我有一个Keydown函数，在按键上向左/向右移动1980像素。(我不能得到按键工作，因为阻止了默认移动)

<script>
    $(window).keydown(function (e) {
    var currentx = 0;
    var viewport = 1920;
    var btnright = (+currentx) + (+viewport);
    var btnleft = (+currentx) - (-viewport);
if ( e.which == 37 ) {
    window.scrollTo(btnleft, 0);
    currentx = (+currentx) - (-viewport);
} else if ( e.which == 39 ) {
    window.scrollTo(btnright, 0);
    currentx = (+currentx) + (+viewport);
}
});
</script>

我希望它是循环的(页面是6000px宽)，但我想一次移动一个面板(1980px)(每次移动后更新$Current)。最终，我可以通过箭头浏览整个页面。

我的问题是我不能让事件触发多次，我只能从0导航到1980。它不会再往前走了。有解决办法吗?

谢谢

如@CBroe所述，每次触发事件时，您的currentx变量都被设置为0。尝试将currentx变量声明移出事件处理程序，如下所示:

<script>
    var currentx = 0,
        viewport = 1920;
    $(window).keydown(function (e) {
        var btnright = (+currentx) + (+viewport),
            btnleft = (+currentx) - (-viewport);
        if ( e.which == 37 ) {
            window.scrollTo(btnleft, 0);
            currentx = (+currentx) - (-viewport);
        } else if ( e.which == 39 ) {
            window.scrollTo(btnright, 0);
            currentx = (+currentx) + (+viewport);
        }
    });
</script>
相关文章：