fix: new add item should be observed

Author: Yrobot

package/index.ts

@@ -71,7 +71,7 @@ export const escapeWhenUpPlugin: Plugin<{
  * @param {Object} options - The config options for the autoScroll function.
  * @param {string} options.selector - The selector for the container element. (example: '#container')
  * @param {Context[]} [options.plugins] - The plugins for the life cycle hooks of the autoScroll function. [escapeHook,onMount,onUnmount]
- * @param {number} [options.throttleTime=100] - The throttle time in milliseconds.
+ * @param {number} [options.throttleTime=100] - The throttle time in milliseconds. default is 100. 0 for no throttle.
  * @param {number} [options.offset=0] - The offset for the scroll position based on the container.scrollHeight.
  *
  * @return {function} The unObserverCallback function.
@@ -101,32 +101,45 @@ export default function autoScroll({
     .filter((result) => typeof result === "function") as OnUnmount[];
 
   // main auto down scroll hook
-  const [scrollHook] = throttle(() => {
+  const onResize = () => {
     if (!!plugins.find((plugin) => plugin?.escapeHook?.(container) === true))
       return false;
     // use requestAnimationFrame for escape ResizeObserver loop
     requestAnimationFrame(() => {
-      container.scrollTop = container.scrollHeight + offset;
+      // console.log("scrollHook", container.scrollHeight - offset);
+      container.scrollTo({
+        top: container.scrollHeight - offset,
+        behavior: "smooth",
+      });
     });
     return true;
-  }, throttleTime);
+  };
+  const [scrollHook] =
+    throttleTime > 0 ? throttle(onResize, throttleTime) : [onResize];
 
   // observers
   const resizeObserver = new ResizeObserver(() => {
+    // console.log("ResizeObserver");
     scrollHook();
   });
+
   const mutationObserver = new MutationObserver(() => {
+    // console.log("MutationObserver");
+    observeChildren(); // re-observe the children when the child is new added or removed
     scrollHook();
   });
 
   // observe the children size change
-  for (const child of container.children) {
-    resizeObserver.observe(child);
-  }
+  const observeChildren = () => {
+    resizeObserver.disconnect(); // clean the previous observer
+    for (const child of container.children) {
+      resizeObserver.observe(child);
+    }
+  };
+  observeChildren();
 
   // observe the subtree child list length change
   mutationObserver.observe(container, {
-    subtree: true,
     childList: true,
   });