使用键（不是鼠标）反向滚动

Question

我想在 3D 世界导航的同时制作一个渐进式滚动页面。然后我必须按 UP 键同时向下滚动。我不知道如何使用键盘命令配置我的页面以使用 UP 键向下滚动并使用 DOWN 键向上滚动。我想我可以在纯 JS 中做到这一点，但我尝试在 Jquery 中开始：jsfiddle

我试过类似的东西：

$(document).ready(function () {
setInterval(function () {
    var iScroll = $(window).scrollTop();
    iScroll = iScroll + 1000;

    $("#search").keyup(function(e) {
        if (e.keyCode == 40) {
          $('html, body').animate({
            scrollTop: iScroll
          }, 1000);
        }
        if(e.keyCode == 38) {
          $('html, body').animate({
            scrollTop: iScroll
          }, 1000);
        }
    });
}, 2000);
});

Answer 1

第一个问题是您正在侦听 ID 为 #search 的元素上的 keyup 事件，在窗口上侦听更为常见，因为它可以让您在全局范围内（页面上的任何位置）捕获事件。 setInterval 也是不必要的，您可以在实际滚动之前将其删除并更新 iScroll。

$(document).ready(function () {
  var iScroll = $(window).scrollTop();

  $(window).keydown(function(e) {
    e.preventDefault()
    if (e.keyCode == 40) {
      // Scroll to the current scroll position - 1000
      iScroll = -1000;
    }
    if(e.keyCode == 38) {
      // Scroll to the current scroll position + 1000
      iScroll = 1000;
    }
  });

  // Check where to scroll to
  setInterval(function(){
    $('html, body').animate({
      scrollTop: $(window).scrollTop() + iScroll
    }, 1000);
    // Reset iScroll so that we don't keep scrolling automatically
    iScroll = 0;
  }, 1100)
});

https://jsfiddle.net/wgm1gtx6/