scroll to bottom;section A Id

wujingjing

2024-09-10 312dd4fbc040b0f413c9b27149613d6f22c949a0

 src/components/chat/hooks/useScrollToBottom.ts

@@ -1,20 +1,37 @@
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>;
   displayMessageList: ComputedRef<ChatMessage[]>;
};

export const useScrollToBottom = (option:UseScrollToBottomOption) => {
    const {chatListDom,displayMessageList} = option;
export const useScrollToBottom = (option: UseScrollToBottomOption) => {
   const { chatListDom, displayMessageList } = option;

    const scrollToBottom = () => {
        if (!chatListDom.value) return;
        chatListDom.value.lastElementChild?.scrollIntoView();
    };
    const forbidScroll = ref(false);
   const scrollToBottom = () => {
      if (!chatListDom.value) return;
      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,
   };
};