javascript - 实现类似 Vim 的热键时遇到问题

Question

我正在尝试为我的项目实现类似 Vim 的热键；首先，我决定实现 j 和 k 绑定(bind)，因此我编写了这个 KeyboardEvent 处理程序:

window.onkeydown = function( event ) {
    if (event.code === 'KeyJ')
        window.scrollBy({ top: 128, behavior: 'smooth' });

    else if (event.code === 'KeyK')
        window.scrollBy({ top: -128, behavior: 'smooth' });
};

看起来合法，对吧？实际上 - 不:当我按住j或k时，滚动过程变得脱节和撕裂(而且看起来滚动速度被削减了一半，例如将 64 添加到 scrollTop 而不是 128)。

我可以使用plain直接将k映射到↑并将j映射到↓吗强> JavaScript？

<小时/>

我已经尝试过这个solution :

const ArrowUp = new KeyboardEvent( 'keydown', { code: 'ArrowUp' } );
const ArrowDown = new KeyboardEvent( 'keydown', { code: 'ArrowDown' } );

window.onkeydown = function( event ) {
    if (event.code === 'KeyJ')
        window.dispatchEvent( ArrowDown );

    else if (event.code === 'KeyK')
        window.dispatchEvent( ArrowUp );
};

但它根本不起作用，我什至没有收到任何错误。

Answer 1

我有两个解决方案。第一个解决方案有点......只能说它不是很好。您可以强制它只经常监听事件以防止出现故障。

var lastScrollTime = Date.now();
window.onkeydown = function( event ) {
    var d = Date.now();
    if(d - lastScrollTime < 64){
        return;
    }
    lastScrollTime = d;
    if (event.code === 'KeyJ')
        window.scrollBy({ top: 128, behavior: 'smooth' });

    else if (event.code === 'KeyK')
        window.scrollBy({ top: -128, behavior: 'smooth' });
};

我的第二个解决方案稍微好一点，但绝不是很好。您可以实现自己的平滑滚动系统。

var scrollTo = 0;
function lerpTo(){
    var newPt = lerp(scrollTo, window.scrollY, 1.1);
    console.log(newPt);
    window.scrollBy(0, window.scrollY - newPt);
}
function lerp(v0, v1, t) {
    return v0*(1-t)+v1*t
}
setInterval(lerpTo, 20);

然后，您所要做的就是每当您按 j 或 k 时更改“scrollTo”。现在该代码使用了 lerp 函数。如果您想要更一致的运动，您可以将其更改为固定量。最大的缺点是你不能再正常滚动。要重新添加正常滚动，您必须监听该事件并再次将滚动设置为，但我认为这是一个糟糕的解决方案。或者，要再次添加正常滚动，您可以在手动滚动时禁用 lerp 代码，然后在有人按 j 或 k 时重新启用它。