vue.js 使用箭头键平滑滚动到中间、底部和顶部顶部

Question

我想使用向上和向下箭头键来平滑向下和向上滚动页面。

第一次按下按键应该将我带到中间（50％），
第二次向下按键到页面底部
向上键反之亦然。

这可以用vue吗？

Answer 1

这应该可以通过vue.js和/或某些JavaScript 。 如果您想将此操作绑定到某些html元素，您应该查看KeyCode Modifiers ，您可以在其中选择将它们绑定到v-on 。 如果您只想使用一些JavaScript而不将操作绑定到vue.js ，它可能是这样的：

document.onkeydown = keyDownFunc;

function keyDownFunc(e) {
    e = e || window.event;

    if (e.keyCode == '40') {
        // do something
    }
}

在这种情况下， 40是arrow down 。 要获取您的密钥代码，只需访问： keycode.info 。

Answer 2

纯 javascript 可以做到这一点，因此 vue 也可以

看看这个例子

首先，注意这个方法：

    scrollView(amount) {
      let scrollFromTop = window.pageYOffset;
      const viewHeight = Math.round(window.innerHeight * Math.abs(amount));
      if (scrollFromTop % viewHeight === 0) scrollFromTop += Math.sign(amount);
      let targetPos;
      if (amount > 0)
        targetPos = Math.ceil(scrollFromTop / viewHeight) * viewHeight;
      else
        targetPos = Math.floor(scrollFromTop / viewHeight) * viewHeight;
      window.scrollTo({
        top: targetPos,
        behavior: "smooth"
      });
    }

它从顶部确定视图高度和当前滚动。 然后，它根据提供的数量和视图大小向上或向下滚动页面。

注意：某些浏览器尚不支持平滑滚动，如果您决定实施此解决方案，则应使用smoothscroll-polyfill 。

接下来看看这几个负责关键事件监听的钩子：

  mounted() {
    window.addEventListener("keydown", this.keyHandler);
  },
  beforeUnmount() {
    window.removeEventListener("keydown", this.keyHandler);
  }

最后但同样重要的是，事件处理逻辑：

    keyHandler(e) {
      if (e.key === 'ArrowDown') {
        e.preventDefault();
        this.scrollView(this.scrollAmount); 
      }
      if (e.key === 'ArrowUp') {
        e.preventDefault();
        this.scrollView(this.scrollAmount * -1); 
      }
    },