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/

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

1 个答案: