detect body resize with ResizeObserver at PageProgressBar (#65)

hyesungoh · Jun 20, 2022 · ec9ccd0 · ec9ccd0 · vercel · Jun 20, 2022
1 parent 3d7b90a
commit ec9ccd0
Showing 1 changed file with 16 additions and 5 deletions.
diff --git a/packages/core/components/PageProgressBar/PageProgressBar.tsx b/packages/core/components/PageProgressBar/PageProgressBar.tsx
@@ -13,17 +13,28 @@ export function PageProgressBar() {
     }
 
     function setPageOffsetHeight() {
-      setOffsetHeight(window.document.body.offsetHeight - window.innerHeight);
+      const diff = window.document.body.offsetHeight - window.innerHeight;
+      setOffsetHeight(diff);
     }
 
-    setScroll();
-    setPageOffsetHeight();
+    function setScrollAndOffsetHeight() {
+      setScroll();
+      setPageOffsetHeight();
+    }
+
+    setScrollAndOffsetHeight();
+
+    const resizeObserver = new ResizeObserver(setScrollAndOffsetHeight);
+    resizeObserver.observe(window.document.body);
+
     window.addEventListener('scroll', setScroll);
-    window.addEventListener('resize', setPageOffsetHeight);
+    // for window height changed
+    window.addEventListener('resize', setScrollAndOffsetHeight);
 
     return () => {
+      resizeObserver.unobserve(window.document.body);
       window.removeEventListener('scroll', setScroll);
-      window.removeEventListener('resize', setPageOffsetHeight);
+      window.removeEventListener('resize', setScrollAndOffsetHeight);
     };
   }, []);