使用Nuxt或Vuetify实现监听变量变化时自动滚动至可滚动div底部

• 你当前操作的ul元素根本不是可滚动容器：你把overflow: auto和固定高度写在了父组件的.messages-container节点上，滚动条实际是挂载在这个父节点上的，无滚动能力的ul的scrollTop属性永远为0，自然赋值后没有变化
• 即使找对了滚动容器，你在监听ROUND_MESSAGES变化时直接修改scrollTop会失效：Vue的响应式数据更新后，DOM渲染是异步执行的，此时新消息对应的li节点还没被挂载到页面上，容器高度还是旧值，滚动定位也不准

方案1：将滚动逻辑封闭在消息子组件内（更推荐） #

1. 给消息窗口组件的ul添加滚动相关样式，让它成为可滚动容器：

/* 消息窗口组件的<style>块中添加 */
.messages-ul {
  height: 100%;
  overflow: auto;
  margin: 0;
  padding: 0;
}

给模板里的ul加对应的class：

<ul ref="messages" class="messages-ul">

2. 去掉父组件.messages-container上的overflow: auto属性，避免多层滚动冲突
3. 修改watch逻辑，等DOM更新完成后再执行滚动：

watch: {
  ROUND_MESSAGES() {
    // 等待新消息的DOM节点渲染完成
    this.$nextTick(() => {
      const scrollContainer = this.$refs.messages
      scrollContainer.scrollTop = scrollContainer.scrollHeight
    })
  }
}

方案2：直接操作父层滚动容器 #

如果不想改动现有样式结构，直接操作父组件的滚动容器即可：

watch: {
  ROUND_MESSAGES() {
    this.$nextTick(() => {
      // 获取父层带.messages-container类的滚动容器
      const scrollContainer = this.$el.closest('.messages-container')
      scrollContainer.scrollTop = scrollContainer.scrollHeight
    })
  }
}

内容的提问来源于stack exchange，提问作者hipsterstomper69