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

Posted 2023-03-17

【中文标题】使用键（不是鼠标）反向滚动

【英文标题】：Reverse scrolling with keys (not mouse)

【发布时间】：2018-08-04 08:53:57

【问题描述】：

我想在 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);
);

【参考方案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/

【讨论】：

哇，太快了，谢谢！我现在会尽量让它更顺畅。

问题是我不能一直按下键和命令重复，我有没有办法让它连续？

@FlorianFromager 查看已编辑的答案，猜猜这就是您要查找的内容

谢谢马蒂亚斯