Vue 项目中使用 mCustomScrollbar 插件实现点击历史聊天记录后滚动到相应消息元素的位置

 mCustomScrollbar 文档

实现逻辑：使用mCustomScrollbar插件中的scrollTo 方法，将滚动条滚动到 messageElement 元素。

聊天记录弹窗代码

<li class="trans-row" v-for="item in list.record" :key="item.id" @click="handleMessageList(item.id)">
    ...聊天记录列表
</li>

//NewsList.vue 聊天记录弹窗
computed: {
    ...mapState({
      messageListContainer: state => state.MessageListContainer.messageListContainer,
    }),
  },

methods:{
    handleMessageList(mid){
      const messageElement = document.querySelector(`[mid="${mid}"]`); //查找消息元素:根据mid查找,每条消息的mid是唯一的
      if (messageElement) {
        this.clickCloseWindow() // 关闭聊天记录窗口
        $(this.messageListContainer).mCustomScrollbar('scrollTo', messageElement, {
          scrollInertia: 1,
          scrollEasing: "easeInOutQuad"
        });
        
        // 设置背景颜色
        messageElement.style.backgroundColor = '#eaeaea';

        // 2秒后清除背景颜色
        setTimeout(() => {
          messageElement.style.backgroundColor = '';
        }, 2000);
        
      } else {
        console.warn(`Message with mid ${mid} not found.`);
      }
    },
}

聊天会话

//MsgList.vue 聊天会话
<div class="msgcontainer" id="msgcontainer" ref="messageListContainer">
    ...消息列表显示
</div>

mounted() {
    this.updateMessageListContainer(this.$refs.messageListContainer);
},

methods(){
...mapActions('MessageListContainer', ['updateMessageListContainer']), // 使用命名空间
}

//index.js
import Vue from 'vue'
import Vuex from 'vuex'
import MessageListContainer from "@/store/messageListContainer";

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    MessageListContainer
  },
});

//messageListContainer.js
export default {
  namespaced: true, // 启用命名空间
  state: {
    messageListContainer: null,
  },
  mutations: {
    setMessageListContainer(state, container) {
      state.messageListContainer = container;
    },
  },
  actions: {
    updateMessageListContainer({ commit }, container) {
      commit("setMessageListContainer", container);
    },
  },
};

• 使用 jQuery 的 mCustomScrollbar 插件将滚动条平滑地滚动到 messageElement 的位置。scrollInertia 设置滚动的持续时间（1毫秒）。
• scrollEasing 设置滚动的缓动效果（"easeInOutQuad"）。
• this.messageListContainer是聊天会话容器ref，NewsList.vue与MsgList.vue不是父子关系，是通过 Vuex 进行状态管理：将 messageListContainer 的状态存储在 Vuex 中，然后在NewsList.vue中访问这个状态。