关于scroll、vue2的一些坑

最新推荐文章于 2024-08-23 17:58:50 发布

crystal_pin

最新推荐文章于 2024-08-23 17:58:50 发布

阅读量151

点赞数

分类专栏： scroll bug 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_25424909/article/details/129425575

版权

scroll 同时被 2 个专栏收录

1 篇文章

订阅专栏

bug

1 篇文章

订阅专栏

该代码段展示了如何处理滚动事件，特别是在聊天应用中显示最新消息的场景。handlScroll函数使用了Vue的$nextTick来确保DOM更新后再执行scrollIntoView方法，避免使用可能过时的元素引用。当immediate为true时，直接滚动到最后一项；否则，在DOM更新后滚动到视图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   handlScroll(immediate = false) {
      // 一开始用的是这种方法
      // const parent = document.querySelector('.chat-container');
      // const child = document.querySelector('.chat-record');
      // parent.scrollTop = child.scrollHeight
      const ele = this.$refs.chatRecord.$el.lastElementChild;
      if (immediate) {
        //input focus事件立马调一次，显示最新消息
        ele && ele.scrollIntoView();
        return;
      }
      this.$nextTick(() => {
        //不能直接用 ele  nextTick会重新更新DOM，ele是上一轮的缓存
        //因为要滚动的内容跟触发滚动的事件不在同一个组件，所以用了$el层层筛选
        this.$refs.chatRecord.$el.lastElementChild.scrollIntoView();
      });
    },