Vue UI控制台滚动优化：用户向上滚动时不触发自动滚动方案问询

核心逻辑通过状态标记+滚动位置判断控制自动滚动触发，具体实现步骤如下：

1. 初始化状态变量 #

在data中新增两个控制状态：

data() {
  return {
    // 原有业务数据...
    shouldAutoScroll: true, // 是否允许自动滚动到最新日志
    isUserScrolling: false // 是否为用户主动触发的滚动行为
  }
}

2. 给滚动容器绑定事件监听 #

获取#uiconsole滚动容器，在生命周期中绑定/解绑滚动事件：

mounted() {
  this.consoleEl = document.getElementById('uiconsole')
  this.consoleEl.addEventListener('scroll', this.handleConsoleScroll)
},
beforeUnmount() {
  this.consoleEl.removeEventListener('scroll', this.handleConsoleScroll)
}

3. 实现滚动事件处理逻辑 #

根据滚动位置更新自动滚动开关状态：

methods: {
  handleConsoleScroll() {
    const { scrollTop, scrollHeight, clientHeight } = this.consoleEl
    // 预留10px阈值兼容不同浏览器滚动精度，可根据实际体验调整
    const isAtBottom = scrollTop + clientHeight >= scrollHeight - 10
    if (isAtBottom) {
      this.shouldAutoScroll = true
      this.isUserScrolling = false
    } else {
      // 不在底部即判定为用户主动向上查看历史，关闭自动滚动
      this.isUserScrolling = true
      this.shouldAutoScroll = false
    }
  }
}

4. 修改原有watch逻辑 #

仅在允许自动滚动时执行滚动操作：

watch: {
  uilogs: {
    handler: function() {
      this.$nextTick(() => {
        if (this.shouldAutoScroll) {
          // 加可选链防止日志为空时报错，不需要平滑滚动可删除behavior参数
          Array.from(document.querySelectorAll('#uiconsole > div'))
               .pop()
               ?.scrollIntoView({ behavior: 'smooth' })
        }
      })
    },
    deep: true // 如果是修改数组元素而非替换数组引用，需开启deep监听
  }   
}

补充优化说明 #

• 你之前判断底部未生效大概率是没有预留阈值，不同浏览器滚动计算存在精度误差，10px以内的偏差都判定为在底部即可解决
• 如果日志更新频率很高，可以给handleConsoleScroll加防抖优化性能

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