Javascript 当使用div中的键滚动时，如何正确设置scrollTop以使选定项保持在同一位置

我正在尝试在vue.js中从头开始创建自己的输入+下拉控件，尽管这并不相关。我想使用鼠标或键盘向下滚动项目列表

为此，我使用了一个具有固定高度和溢出y的div，在该div中，对于每个项目，我使用另一个div。当使用键盘滚动时，我跟踪所选项目，并使用它设置div的滚动顶部位置，使滚动条与键盘输入一起移动，所选的项在div的中间保持可见。 但我遇到的问题是，当列表中有很多项并且存在某种缩放时，设置.scrollTop属性

  setScrollPosition () {
    if(+this.keyIndex >= 6){
      this.$refs.testMainDiv.scrollTop = (+this.keyIndex - 6) * +this.$refs.testItemDiv[+this.keyIndex].clientHeight;
    }
    else{
      this.$refs.testMainDiv.scrollTop = 0;
    }
  },

我的问题是，在Windows 10中，如果由于使用4k监视器而将显示比例更改为125%，则每次按下key.down键时，向下滚动列表将使所选项目稍微向上移动。有没有一种方法可以使这种天平不起作用？使用页面缩放时也会发生这种情况。

这就是发生的情况：

对于变换，offsetWidth和offsetHeight返回元素的布局宽度和高度，而getBoundingClientRect返回渲染宽度和高度

因此，在这种情况下，clientHeight与offsetHeight具有相同的结果。您需要使用getBoundingClientRect

setScrollPosition () {
        if(+this.keyIndex >= 6){
          this.$refs.testMainDiv.scrollTop = (+this.keyIndex - 6) * this.$refs.testItemDiv[+this.keyIndex].getBoundingClientRect().height;
        }
        else{
          this.$refs.testMainDiv.scrollTop = 0;
        }
      }

我用浏览器缩放进行了测试，效果很好，你可以用显示缩放进行测试，让我们看看