【问题标题】:Scrolling to the bottom of a div is not working滚动到 div 的底部不起作用
【发布时间】:2019-11-10 17:44:05
【问题描述】:

当单击某个按钮(聊天上下文)时,我试图将 div 滚动到其底部,但它无法正常工作

在此聊天中,我需要在开始时在顶部显示消息,当我获得更多内容时会自动滚动到底部以显示最新消息,我已经尝试过scrollIntoView,如下代码所示:

      const element = this.$el.querySelector(".chat-box");
      element.scrollIntoView({behavior: "smooth", block: "end"})
    }

我希望滚动到 div 的末尾,但实际上滚动到底部附近,缺少一些内容。 只有scrollIntoView 实际移动了滚动条,我尝试了element.scrollTop = element.scrollHeigh 并没有任何反应

【问题讨论】:

    标签: html css vue.js bootstrap-vue


    【解决方案1】:

    我假设您在与scrollInToView 调用相同的回调中推送新消息?

    我认为你在做什么:

    this.messages.push(newMessage);
    const element = this.$el.querySelector(".chat-box");
    element.scrollIntoView({behavior: "smooth", block: "end"})
    

    引用Vue.js docs

    如果您还没有注意到,Vue 会异步执行 DOM 更新。每当观察到数据更改时,它将打开一个队列并缓冲同一事件循环中发生的所有数据更改。如果同一个 watcher 被多次触发,它只会被推入队列一次。这种缓冲的重复数据删除对于避免不必要的计算和 DOM 操作很重要。然后,在下一个事件循环“tick”中,Vue 刷新队列并执行实际的(已经去重复的)工作。

    这意味着您需要等待下一个滴答声才能尝试滚动到最后一个项目,所以这样的事情应该可以工作:

    this.messages.push(newMessage);
    
    // wait until the new message is rendered
    this.$nextTick(() => {
      // then scroll
      const element = this.$el.querySelector(".chat-box");
      element.scrollIntoView({behavior: "smooth", block: "end"})
    });
    

    【讨论】:

      猜你喜欢
      • 2021-08-01
      • 1970-01-01
      • 1970-01-01
      • 2023-02-01
      • 1970-01-01
      • 1970-01-01
      • 2012-07-13
      • 2010-09-21
      相关资源
      最近更新 更多