fix: correctly adjust left scroll position in nested scroll container (#64)

* fix: correctly adjust left scroll position in nested scroll container

* also check for overflow='scroll'

* only measure node when it is visible

* chore: improve auto alignment example

* chore: only render node when it has been measured in

* chore: better wording for regression

Author: frontendphil

demo/src/AutoAlignment.js

@@ -34,28 +34,34 @@ function AutoAlignment() {
 
       <h4>Horizontal flipping</h4>
 
-      <div style={{ height: 350, width: 2000 }}>
-        <Stick
-          autoFlipHorizontally
-          position="middle left"
-          style={{ display: 'inline-block', marginLeft: 250 }}
-          node={
-            <div style={{ backgroundColor: '#ae0d5c', height: 50, width: 200 }}>
-              This is the content of the node
-            </div>
-          }
-        >
-          <div
-            style={{
-              width: 200,
-              height: 100,
-              backgroundColor: 'rgb(24, 170, 177)',
-            }}
+      <div
+        style={{ overflowX: 'auto', border: '1px solid black', padding: 25 }}
+      >
+        <div style={{ height: 350, width: 5000 }}>
+          <Stick
+            autoFlipHorizontally
+            position="middle left"
+            style={{ display: 'inline-block', marginLeft: 250 }}
+            node={
+              <div
+                style={{ backgroundColor: '#ae0d5c', height: 50, width: 200 }}
+              >
+                This is the content of the node
+              </div>
+            }
           >
-            The node of this stick should move to the right if it can't fit to
-            the left
-          </div>
-        </Stick>
+            <div
+              style={{
+                width: 200,
+                height: 100,
+                backgroundColor: 'rgb(24, 170, 177)',
+              }}
+            >
+              The node of this stick should move to the right if it can't fit to
+              the left
+            </div>
+          </Stick>
+        </div>
       </div>
     </div>
   )

demo/src/regressions/Regressions.js

@@ -3,6 +3,7 @@ import React from 'react'
 import ButtonOverlay from './ButtonOverlay'
 import FitOnPage from './FitOnPage'
 import SameWidth from './SameWidth'
+import ScrollPosition from './ScrollPosition'
 import StickInSvg from './StickInSvg'
 import StickNodeWidth from './StickNodeWidth'
 import StickOnHover from './StickOnHover'
@@ -22,6 +23,7 @@ export default function Regressions() {
       <StyledWithDataAttributes />
       <TransportToFixedContainer />
       <StickOnHover />
+      <ScrollPosition />
     </div>
   )
 }

demo/src/regressions/ScrollPosition.js

@@ -0,0 +1,63 @@
+import React from 'react'
+
+import Stick from '../../../es'
+import Regression from './Regression'
+
+function ScrollPosition() {
+  return (
+    <Regression
+      fixed
+      allBrowsers
+      version="3.0.3"
+      title="Node should scroll with anchor node"
+      description="Scroll to the side. The node should move with the anchor node."
+    >
+      <div style={{ overflow: 'auto', height: 200, border: '1px solid black' }}>
+        <div
+          style={{
+            width: 5000,
+            height: 5000,
+            marginLeft: 20,
+            marginTop: 20,
+            display: 'flex',
+            alignItems: 'flex-start',
+          }}
+        >
+          <Stick
+            node={<Node>This node should always stick with its anchor</Node>}
+          >
+            <Anchor>
+              Scroll to the right. The node should move with this element.
+            </Anchor>
+          </Stick>
+        </div>
+      </div>
+    </Regression>
+  )
+}
+
+const Anchor = ({ children }) => (
+  <div
+    style={{
+      padding: 10,
+      backgroundColor: 'rgb(24, 170, 177)',
+      color: 'white',
+    }}
+  >
+    {children}
+  </div>
+)
+
+const Node = ({ children }) => (
+  <div
+    style={{
+      backgroundColor: '#ae0d5c',
+      color: 'white',
+      padding: 10,
+    }}
+  >
+    {children}
+  </div>
+)
+
+export default ScrollPosition

src/StickPortal.js

@@ -12,10 +12,10 @@ import React, {
   useRef,
   useState,
 } from 'react'
-import { inline } from 'substyle'
 import { createPortal } from 'react-dom'
+import { inline } from 'substyle'
 
-import type { PositionT, StickPortalPropsT } from './flowTypes'
+import type { StickPortalPropsT } from './flowTypes'
 import { useWatcher } from './hooks'
 import { scrollX, scrollY } from './utils'
 
@@ -36,8 +36,8 @@ function StickPortal(
   ref
 ) {
   const nodeRef = useRef()
-  const [top, setTop] = useState(0)
-  const [left, setLeft] = useState(0)
+  const [top, setTop] = useState(null)
+  const [left, setLeft] = useState(null)
   const [visible, setVisible] = useState(!!node)
 
   const [host, hostParent] = useHost(transportTo)
@@ -63,19 +63,14 @@ function StickPortal(
   }, [host, hostParent, visible])
 
   const measure = useCallback(() => {
-    if (!nodeRef.current) {
+    const node = nodeRef.current
+
+    if (!node || !visible) {
       return
     }
 
-    const boundingRect = nodeRef.current.getBoundingClientRect()
-
-    const newTop = calculateTop(position, boundingRect, getFixedParent(host))
-    const newLeft = calculateLeft(
-      nodeRef.current,
-      position,
-      boundingRect,
-      getFixedParent(host)
-    )
+    const newTop = calculateTop(node, position, host)
+    const newLeft = calculateLeft(node, position, host)
 
     if (newTop !== top) {
       setTop(newTop)
@@ -84,7 +79,7 @@ function StickPortal(
     if (newLeft !== left) {
       setLeft(newLeft)
     }
-  }, [host, left, position, top])
+  }, [host, left, position, top, visible])
 
   useWatcher(measure, { updateOnAnimationFrame })
 
@@ -105,22 +100,24 @@ function StickPortal(
     >
       {children}
 
-      <PortalContext.Provider value={host.parentNode}>
-        {createPortal(
-          <div
-            ref={containerRef}
-            data-sticknestingkey={nestingKey}
-            {...inline(style('node'), {
-              position: 'absolute',
-              top,
-              left,
-            })}
-          >
-            {node}
-          </div>,
-          host
-        )}
-      </PortalContext.Provider>
+      {top != null && left != null && (
+        <PortalContext.Provider value={host.parentNode}>
+          {createPortal(
+            <div
+              ref={containerRef}
+              data-sticknestingkey={nestingKey}
+              {...inline(style('node'), {
+                position: 'absolute',
+                top,
+                left,
+              })}
+            >
+              {node}
+            </div>,
+            host
+          )}
+        </PortalContext.Provider>
+      )}
     </Component>
   )
 }
@@ -141,11 +138,10 @@ function useHost(transportTo) {
   return [host, hostParent]
 }
 
-function calculateTop(
-  position: PositionT,
-  { top, height, bottom }: ClientRect,
-  fixedHost: ?Element
-) {
+function calculateTop(node, position, host) {
+  const { top, height, bottom } = node.getBoundingClientRect()
+  const fixedHost = getFixedParent(host)
+
   let result = 0
   if (position.indexOf('top') !== -1) {
     result = top
@@ -166,12 +162,12 @@ function calculateTop(
   return result + scrollY()
 }
 
-function calculateLeft(
-  nodeRef,
-  position: PositionT,
-  { left, width, right }: ClientRect,
-  fixedHost: ?Element
-) {
+function calculateLeft(node, position, host) {
+  const { left, width, right } = node.getBoundingClientRect()
+
+  const fixedHost = getFixedParent(host)
+  const scrollHost = getScrollParent(node)
+
   let result = 0
   if (position.indexOf('left') !== -1) {
     result = left
@@ -189,7 +185,31 @@ function calculateLeft(
     return result - hostLeft
   }
 
-  return result + scrollX(nodeRef)
+  if (scrollHost) {
+    return result + scrollX(node) - scrollHost.scrollLeft
+  }
+
+  return result + scrollX(node)
+}
+
+function getScrollParent(element) {
+  if (!element) {
+    return null
+  }
+
+  if (element.nodeName === 'BODY' || element.nodeName === 'HTML') {
+    return null
+  }
+
+  const style = getComputedStyle(element)
+
+  if (style.overflowX === 'auto' || style.overflowX === 'scroll') {
+    return element
+  }
+
+  return element.parentNode instanceof Element
+    ? getScrollParent(element.parentNode)
+    : null
 }
 
 function getFixedParent(element: Element): ?Element {