javascript - KeyPress水平导航

Question

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

由于 Firefox/Chrome 处理默认箭头移动的方式不同，我不得不禁用默认移动(Firefox 会将其移动到太右 20 像素)。

<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>

我希望它重复出现(页面宽度为 6000 像素)，但我想一次移动 1 个面板(1980 像素)(每次移动后更新 $Current)。最终，我可以通过箭头浏览整个页面。

我的问题是我无法让事件触发不止一次，我只能从 0 导航到 1980。它不会再继续了。有解决办法吗？

谢谢

Answer 1

正如@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>