yangyin
2024-11-08 b5e920831f3e2ea94c809b0dd99f08c16d9feceb
src/components/chat/hooks/useScrollToBottom.ts
@@ -6,49 +6,34 @@
export type UseScrollToBottomOption = {
   chatListDom: Ref<HTMLDivElement>;
   displayMessageList: ComputedRef<ChatMessage[]>;
};
export const useScrollToBottom = (option: UseScrollToBottomOption) => {
   const { chatListDom, displayMessageList } = option;
   const { chatListDom } = option;
   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;
      }
      nextTick(() => {
         if (chatListDom.value.scrollHeight > chatListDom.value.clientHeight) {
            chatListDom.value.scrollTop = chatListDom.value.scrollHeight - chatListDom.value.clientHeight;
         }
      });
   };
   const debounceAmisScroll = debounce(({ instance }) => {
      nextTick(() => {
         scrollToBottom();
      });
      scrollToBottom();
   }, 500);
   emitter.on('amis.page.ready', debounceAmisScroll);
   // emitter.on('amis.page.ready', debounceAmisScroll);
   onUnmounted(()=>{
      emitter.off('amis.page.ready');
   })
   const forbidScroll = ref(false);
   watch(
      displayMessageList,
      () => {
         if (forbidScroll.value) return;
         nextTick(() => scrollToBottom());
      },
      {
         deep: true,
      }
   );
   // onUnmounted(() => {
   //    emitter.off('amis.page.ready');
   // });
   onActivated(() => {
      if (forbidScroll.value) return;
      nextTick(() => scrollToBottom());
      scrollToBottom();
   });
   return {
      forbidScroll,
      scrollToBottom,
   };
};