scroll to bottom;section A Id

wujingjing

2024-09-10 312dd4fbc040b0f413c9b27149613d6f22c949a0

 src/components/chat/hooks/useScrollToBottom.ts

@@ -1,6 +1,8 @@
import type { ComputedRef, Ref } from 'vue';
import { nextTick, onActivated, ref, watch } from 'vue';
import { nextTick, onActivated, onUnmounted, ref, watch } from 'vue';
import type { ChatMessage } from '../model/types';
import emitter from '/@/utils/mitt';
import { debounce } from '/@/utils/util';

export type UseScrollToBottomOption = {
   chatListDom: Ref<HTMLDivElement>;
@@ -12,8 +14,23 @@

    const scrollToBottom = () => {
        if (!chatListDom.value) return;
        chatListDom.value.lastElementChild?.scrollIntoView();
      const parent = chatListDom.value.parentElement;
      if (!parent) return;
      if (parent.scrollHeight > parent.clientHeight) {
         parent.scrollTop = parent.scrollHeight - parent.clientHeight;
      }
    };
   const debounceAmisScroll = debounce(({ instance }) => {
      nextTick(() => {
         scrollToBottom();
      });
   }, 500);

   emitter.on('amis.page.ready', debounceAmisScroll);

   onUnmounted(()=>{
      emitter.off('amis.page.ready');
   })
    const forbidScroll = ref(false);
   watch(
      displayMessageList,
@@ -32,6 +49,6 @@
   });

   return {
        forbidScroll
      forbidScroll,
    };
};