Question

在下面提到的链接中，我创建了示例代码，以更好地解释我的问题。

我有一个div和两个buttons。现在，当按下按钮时，文本将插入到div中。 现在要查看当前在滚动条中输入的文本，每次输入文本时滚动条都会移到最右端。我正在使用以下代码执行此操作：

const container = document.querySelector(".container");

container.scrollTo({
   left: container.scrollWidth,
   top: 0,
   behavior: "auto"
});

.container被赋予以下属性以将其粘贴到右侧：overflow-x:auto; text-align:right;

在没有Vue的情况下它可以正常工作，但是当我在Vue中这样做时，会感到不安。在Vue中，滚动条会向右滚动，但不会移到最右端，它会在右边留下一个数字。

这两个代码都是为了测试我在说什么，只是不断插入数字，直到出现溢出为止。

没有Vue，效果很好！ Here

使用Vue不能正常工作：( {Here

非常感谢！

Answer 1

这就是解决我的问题的原因。

我不得不使用this.$nextTick()。这是完整的解决方案！

async scrollLeft() {
  await this.$nextTick();

  const container = document.querySelector(".container");

  container.scrollTo({
      left: container.scrollWidth,
      top: 0,
      behavior: "auto"
    });
  }

滚动条无法在Vue中正确滚动？

1 个答案: