KeyPress水平导航

Question

我试图使用左右箭头水平浏览我的网页。

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

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

然后，我有了一个按键函数，可以在按键上左右移动1980 on。(我无法让按键工作，因为阻塞了默认的移动)

<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 at )，但我想一次移动一个面板(1980px) (每次移动后更新$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>