fix: wrapped element calcation size and position

Signed-off-by: Innei <i@innei.in>
Innei · Sep 4, 2024 · 86a702c · 86a702c
1 parent fa7fb07
commit 86a702c
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 19 deletions.
diff --git a/src/hooks/shared/use-read-percent.ts b/src/hooks/shared/use-read-percent.ts
@@ -11,8 +11,7 @@ export const useReadPercent = () => {
   const readPercent = usePageScrollLocationSelector(
     (scrollTop) => {
       const winHeight = getViewport().h
-      const deltaHeight =
-        scrollTop >= winHeight ? winHeight : (scrollTop / winHeight) * winHeight
+      const deltaHeight = scrollTop >= winHeight ? winHeight : scrollTop
 
       return (
         Math.floor(

diff --git a/src/providers/shared/WrappedElementProvider.tsx b/src/providers/shared/WrappedElementProvider.tsx
@@ -57,33 +57,43 @@ export const WrappedElementProvider: Component<WrappedElementProviderProps> = ({
   children,
   className,
   ...props
-}) => {
-  return (
-    <ProviderComposer contexts={Providers}>
-      <ArticleElementResizeObserver />
-      <Content {...props} className={className}>
-        {children}
-      </Content>
-    </ProviderComposer>
-  )
-}
-const ArticleElementResizeObserver = () => {
+}) => (
+  <ProviderComposer contexts={Providers}>
+    <ElementResizeObserver />
+    <Content {...props} className={className}>
+      {children}
+    </Content>
+  </ProviderComposer>
+)
+const ElementResizeObserver = () => {
   const setSize = useSetWrappedElementSize()
   const setPos = useSetElementPosition()
   const $element = useWrappedElement()
   useIsomorphicLayoutEffect(() => {
     if (!$element) return
-    const { height, width, x, y } = $element.getBoundingClientRect()
+    const { height, width, left, top } = $element.getBoundingClientRect()
     setSize({ h: height, w: width })
-    setPos({ x, y })
+
+    const pageX = window.scrollX + left
+    const pageY = window.scrollY + top
+    setPos({ x: pageX, y: pageY })
 
     const observer = new ResizeObserver((entries) => {
       const entry = entries[0]
-      const { height, width } = entry.contentRect
-      const { x, y } = entry.target.getBoundingClientRect()
 
-      setSize({ h: height, w: width })
-      setPos({ x, y })
+      const { height, width } = entry.contentRect
+      const { left, top } = $element.getBoundingClientRect()
+      const pageX = window.scrollX + left
+      const pageY = window.scrollY + top
+
+      setSize((size) => {
+        if (size.h === height && size.w === width) return size
+        return { h: height, w: width }
+      })
+      setPos((pos) => {
+        if (pos.x === pageX && pos.y === pageY) return pos
+        return { x: pageX, y: pageY }
+      })
     })
     observer.observe($element)
     return () => {