Nuxt.js 滚动到 div 元素的底部答案

【问题标题】：Nuxt.js Scroll to bottom of div elementNuxt.js 滚动到 div 元素的底部
【发布时间】：2020-07-10 09:40:24
【问题描述】：

这段代码有什么问题？渲染 div 元素后，滚动必须在 div 元素的底部。 scrollTop 在 func 之后不保存值

<main>
<div v-if="messages">
   <ul ref="messagesContainer">
       <li v-for="message in messages" :key="`${message.text}.${message.username}`">
         <Message :message="message" :username="username" />
       </li>
   </ul>
</div>
</main>

 mounted() {
    this.scrollToEnd();
  },
  methods: {
    scrollToEnd() {
      const height = this.$refs.messagesContainer.scrollHeight;
      this.$refs.messagesContainer.scrollTo(0,height)
      // doesnt work 
      // this.$refs.messagesContainer.scrollTop = height
    }
  }

 main {
    background-color: #fff;
    height: 56vh;
    ul {
      height: 100%;
      overflow: auto;
      flex: auto;
    }
  }

【问题讨论】：

标签： scroll nuxt.js

【解决方案1】：

您可以通过offsetHeight 属性获取元素的y 位置，如下所示： var offsetTop = this.$refs.messagesContainer.offsetHeight;

您可以找到有关offsetHeight、clientHeight 和scrollHeight 属性here 的更多信息

请注意，您需要在 window 元素上调用 scrollTo 方法：

示例：

methods: {
    scrollToEnd() {
      var scrollHeight = this.$refs.messagesContainer.offsetHeight;
      this.$refs.messagesContainer.scrollTop = scrollHeight;
    }
  }

希望这会有所帮助:)

【讨论】：

它没有帮助:(我不知道问题出在哪里
窗口根本不滚动吗？您可以尝试记录offset 值吗？您是否有可能在消息加载和组件完全呈现之前尝试滚动到元素的底部？
我不确定是否需要使用窗口，因为滚动只能在这个 div 元素中使用
啊，好吧，我现在找到你了。然后你需要设置this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight。将编辑上面的答案。
您可以尝试在按钮单击上绑定此方法并调用它以查看它是否与任何与时间相关的渲染问题无关？

【解决方案2】：

<main>
   <ul v-if="messages" id="messagesContainer">
      <li v-for="message in messages" :key="`${message.text}.${message.username}`">
        <Message :message="message" :username="username" />
      </li>
   </ul>
</main>


scrollToEnd() {
  const element = document.getElementById('messagesContainer')
  element.scrollTop = element.offsetHeight + element.scrollHeight
}

【讨论】：

【解决方案3】：

这似乎适用于 Nuxt。这也提供了平滑的滚动。

  const element = this.$refs.messagesContainer;
  element.scrollIntoView({ behavior: "smooth", block: "start" });

【讨论】：