Another try to fix hash navigation

iterative · Apr 7, 2020 · 70a2cb1 · 70a2cb1
1 parent 7d0fda8
commit 70a2cb1
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 8 deletions.
diff --git a/src/components/MainLayout/index.tsx b/src/components/MainLayout/index.tsx
@@ -46,7 +46,9 @@ const MainLayout: LayoutComponent = ({
     <>
       <LayoutHeader modifiers={modifiers} />
       <HamburgerMenu />
-      {children}
+      <div id="layoutContent" className={styles.pageContent}>
+        {children}
+      </div>
       <LayoutFooter modifiers={modifiers} />
     </>
   )

diff --git a/src/components/Page/utils.ts b/src/components/Page/utils.ts
@@ -15,10 +15,13 @@ export const useAnchorNavigation = () => {
       const node = document.querySelector(location.hash)
 
       if (node) {
-        scrollIntoLayout(node)
-        allImagesLoadedInContainer(document.body).then(() =>
-          scrollIntoLayout(node)
-        )
+        const contentRoot = document.getElementById('layoutContent')
+
+        if (contentRoot) {
+          allImagesLoadedInContainer(contentRoot).then(() =>
+            scrollIntoLayout(node)
+          )
+        }
       }
     } else {
       document.documentElement.scrollTop = 0

diff --git a/src/utils/front/images.ts b/src/utils/front/images.ts
@@ -1,7 +1,7 @@
 import Promise from 'promise-polyfill'
 
 export const getImages = (node: Element) =>
-  Array.from(node.querySelectorAll('img'))
+  Array.from(node.querySelectorAll('img')).filter((imgNode) => !!imgNode.src)
 
 export const imageLoaded = (imgNode: HTMLImageElement) => {
   if (imgNode.complete && imgNode.naturalWidth !== 0) {

diff --git a/src/utils/front/scroll.ts b/src/utils/front/scroll.ts
@@ -47,10 +47,10 @@ export const scrollIntoLayout = (
   const nodeOffset = node.getBoundingClientRect()
   const position = htmlNode.scrollTop + nodeOffset.top + (opts?.offset || 0)
   const headerHeight = getHeaderHeightAt(position)
-  const scrollTo = position - headerHeight
+  const scrollTo = Math.floor(position - headerHeight)
 
   if (!opts?.smooth) {
-    htmlNode.scrollTop = scrollTo
+    requestAnimationFrame(() => (htmlNode.scrollTop = scrollTo))
     return
   }