Removed getBoundingClientRect + Controlled Scroll support

package.json

@@ -42,9 +42,9 @@
     "build:lib": "rollup -c",
     "build:ts": "tsc -p tsconfig.build.json",
     "build:copy": "node scripts/build-copy.js",
-    "dev": "concurrently -k -r 'jest --watch' 'yarn run storybook'",
+    "dev": "concurrently -k -r 'jest --watch' 'npm run storybook'",
     "lint": "eslint . --ext js,ts,tsx",
-    "preversion": "yarn build",
+    "preversion": "npm build",
     "pretty": "prettier '**/*.{js,ts,tsx,md,,yml,html}' --write",
     "storybook": "start-storybook -p 9000",
     "storybook:build": "build-storybook --output-dir example",

src/ScrollPercentage.tsx

@@ -40,6 +40,8 @@ export class ScrollPercentage extends React.Component<
 > {
   static displayName = 'ScrollPercentage'
   static defaultProps = {
+    controlledScroll: false,
+    controlledScrollY: 0,
     threshold: 0,
   }
 
@@ -64,6 +66,9 @@ export class ScrollPercentage extends React.Component<
       this.props.onChange(this.state.percentage, this.state.entry)
     }
 
+    if (this.props.controlledScroll)
+      return this.handleControlledScroll(prevProps.controlledScrollY)
+
     if (prevProps.root !== this.props.root) {
       if (this.monitoring) {
         this.monitorScroll(false, prevProps.root)
@@ -77,6 +82,7 @@ export class ScrollPercentage extends React.Component<
   }
 
   componentWillUnmount(): void {
+    if (this.props.controlledScroll) return
     this.monitorScroll(false)
   }
 
@@ -97,17 +103,32 @@ export class ScrollPercentage extends React.Component<
     }
   }
 
+  handleControlledScroll(prevControlledScrollY?: Number | boolean): void {
+    if (!this.node || prevControlledScrollY === this.props.controlledScrollY)
+      return
+
+    const percentage = calculateVerticalPercentage(
+      this.node,
+      this.props.threshold,
+      this.props.root,
+      this.props.controlledScrollY,
+    )
+
+    if (percentage === this.state.percentage) return
+
+    this.setState({ percentage })
+  }
+
   handleScroll = () => {
     if (!this.node) return
-    const bounds = this.node.getBoundingClientRect()
     const percentage = this.props.horizontal
       ? calculateHorizontalPercentage(
-          bounds,
+          this.node,
           this.props.threshold,
           this.props.root,
         )
       : calculateVerticalPercentage(
-          bounds,
+          this.node,
           this.props.threshold,
           this.props.root,
         )

src/index.tsx

@@ -14,6 +14,10 @@ interface RenderProps {
 }
 
 export interface ScrollPercentageOptions extends IntersectionObserverInit {
+  /** Boolean to enable controlled scrolling mode */
+  controlledScroll?: boolean
+  /** Number to pass the current scrollY in controlled scrolling mode */
+  controlledScrollY?: number
   /** Number between 0 and 1 indicating the the percentage that should be visible before triggering */
   threshold?: number
   /** Horizontal scroll mode (true/false) */

src/useScrollPercentage.tsx

@@ -19,17 +19,36 @@ export function useScrollPercentage(
 
   const handleScroll = useCallback(() => {
     if (!target) return
-    const bounds = target.getBoundingClientRect()
     const percentage = options.horizontal
-      ? calculateHorizontalPercentage(bounds, options.threshold, options.root)
-      : calculateVerticalPercentage(bounds, options.threshold, options.root)
+      ? calculateHorizontalPercentage(target, options.threshold, options.root)
+      : calculateVerticalPercentage(target, options.threshold, options.root)
 
     setPercentage(percentage)
   }, [target, options.threshold, options.root, options.horizontal])
 
+  const handleControlledScroll = useCallback(() => {
+    if (!target) return
+
+    const percentage = calculateVerticalPercentage(
+      target,
+      options.threshold,
+      options.root,
+      options.controlledScrollY,
+    )
+
+    setPercentage(percentage)
+
+    return
+  }, [target, options.threshold, options.root, options.controlledScrollY])
+
   useEffect(() => {
     if (inView) {
       const root = options.root || window
+
+      if (options.controlledScroll) {
+        return handleControlledScroll()
+      }
+
       root.addEventListener('scroll', handleScroll, { passive: true })
       root.addEventListener('resize', handleScroll)
 
@@ -42,7 +61,13 @@ export function useScrollPercentage(
       }
     }
     return
-  }, [inView, options.root, handleScroll])
+  }, [
+    inView,
+    options.root,
+    handleScroll,
+    options.controlledScroll,
+    handleControlledScroll,
+  ])
 
   return [ref, percentage, entry]
 }

src/utils.ts

@@ -1,27 +1,69 @@
+/*
+ * Helpers
+ */
+
+function getScrollPercentage(
+  upper: number,
+  inner: number,
+  threshold: number = 0,
+  scrollY: number = 0,
+  frame: number = 0,
+) {
+  const thresholdOffset = threshold * inner
+
+  const top = upper - frame + thresholdOffset
+  const bottom = upper + inner - thresholdOffset
+  const percentage = (scrollY - top) / (bottom - top)
+
+  return Math.max(0, Math.min(1, percentage))
+}
+
+/*
+ * Export functions
+ */
+
 export function calculateVerticalPercentage(
-  bounds: ClientRect,
+  node: HTMLDivElement | Element | any,
   threshold: number = 0,
   root: Window | Element | null | undefined = window,
+  scrollY?: number | boolean | null | undefined,
 ) {
   if (!root) return 0
+
   const vh =
     (root instanceof Element ? root.clientHeight : root.innerHeight) || 0
-  const offset = threshold * bounds.height
-  const percentage =
-    (bounds.bottom - offset) / (vh + bounds.height - offset * 2)
 
-  return 1 - Math.max(0, Math.min(1, percentage))
+  if (typeof scrollY !== 'number') {
+    scrollY = (root instanceof Element ? root.scrollTop : root.scrollY) || 0
+  }
+
+  return getScrollPercentage(
+    node.offsetTop,
+    node.offsetHeight,
+    threshold,
+    scrollY,
+    vh,
+  )
 }
 
 export function calculateHorizontalPercentage(
-  bounds: ClientRect,
+  node: HTMLDivElement | Element | any,
   threshold: number = 0,
   root: Window | Element | null | undefined = window,
+  scrollX?: number | boolean | null | undefined,
 ) {
   if (!root) return 0
   const vw = (root instanceof Element ? root.clientWidth : root.innerWidth) || 0
-  const offset = threshold * bounds.width
-  const percentage = (bounds.right - offset) / (vw + bounds.width - offset * 2)
 
-  return 1 - Math.max(0, Math.min(1, percentage))
+  if (typeof scrollX !== 'number') {
+    scrollX = (root instanceof Element ? root.scrollLeft : root.scrollX) || 0
+  }
+
+  return getScrollPercentage(
+    node.offsetLeft,
+    node.offsetWidth,
+    threshold,
+    scrollX,
+    vw,
+  )
 }

stories/Hooks.story.tsx

@@ -5,6 +5,7 @@ import styled from 'styled-components'
 import { ScrollPercentageOptions, useScrollPercentage } from '../src'
 import { number, withKnobs } from '@storybook/addon-knobs'
 import ScrollWrapper from './ScrollWrapper'
+import VirtualScrollWrapper from './VirtualScrollWrapper'
 
 type Props = {
   options?: ScrollPercentageOptions
@@ -68,3 +69,12 @@ storiesOf('useScrollPercentage', module)
       <HookComponent options={{ horizontal: true }} />
     </ScrollWrapper>
   ))
+  .add('Example virtual', () => (
+    <VirtualScrollWrapper>
+      {({ scrollY = 0 }) => (
+        <HookComponent
+          options={{ controlledScroll: true, controlledScrollY: scrollY }}
+        />
+      )}
+    </VirtualScrollWrapper>
+  ))

stories/ScrollPercentage.story.tsx

@@ -3,6 +3,7 @@ import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import { ScrollPercentage } from '../src'
 import ScrollWrapper from './ScrollWrapper'
+import VirtualScrollWrapper from './VirtualScrollWrapper'
 import Status from './Status'
 
 const calcPercentage = (percentage: number) => Math.floor(percentage * 100)
@@ -124,3 +125,22 @@ storiesOf('Scroll Percentage', module)
       </ScrollPercentage>
     </ScrollWrapper>
   ))
+  .add('Virtual scroll', () => (
+    <VirtualScrollWrapper>
+      {({ scrollY }) => (
+        <ScrollPercentage controlledScroll={true} controlledScrollY={scrollY}>
+          {({ percentage, ref }) => (
+            <Header ref={ref}>
+              <Status
+                percentage={percentage}
+                style={{
+                  transform: `translate3d( 0, ${scrollY}px, 0)`,
+                }}
+              />
+              {`Percentage scrolled: ${calcPercentage(percentage)}%.`}
+            </Header>
+          )}
+        </ScrollPercentage>
+      )}
+    </VirtualScrollWrapper>
+  ))

stories/Status/index.tsx

@@ -1,6 +1,6 @@
 import { CSSProperties, default as React } from 'react'
 
-type Props = { percentage: number }
+type Props = { percentage: number; style?: object }
 
 const calcPercentage = (percentage: number) => Math.floor(percentage * 100)
 
@@ -23,9 +23,9 @@ const percentageStyle: CSSProperties = {
   fontSize: '1.25rem',
 }
 
-function Status({ percentage }: Props) {
+function Status({ percentage, style = {} }: Props) {
   return (
-    <div style={statusElement}>
+    <div style={{ ...statusElement, ...style }}>
       <span style={percentageStyle}>{calcPercentage(percentage)}%</span>
     </div>
   )