feat: support documentParent mode

Author: ron0115

.github/workflows/storybook.yml

@@ -17,7 +17,7 @@ on:
       - README.md
 
 jobs:
-  build:
+  deploy:
     runs-on: ubuntu-latest
 
     steps:
@@ -52,7 +52,7 @@ jobs:
       #   env:
       #     CI: true
 
-      - name: Release
+      - name: Deploy
         run: |
           npm run deploy-storybook -- --ci
         env:

.storybook/main.js

@@ -2,7 +2,7 @@ const path = require('path');
 const basePath = path.resolve(__dirname, '../', 'src');
 
 module.exports = {
-  stories: ['../(stories|example)/**/*.stories.(ts|tsx)'],
+  stories: ['../@(stories|example)/*.stories.@(ts|tsx)'],
   addons: [
     '@storybook/addon-actions',
     '@storybook/addon-links',

README.md

@@ -26,7 +26,12 @@ npm install react-smooth-scroll-hook
 import React, { useRef } from 'react';
 import useSmoothScroll from 'react-smooth-scroll-hook';
 export const Demo = () => {
-  const ref = useRef<HTMLDivElement>(null);
+  // A custom scroll container
+  const ref = useRef(null);
+
+  // Also support document.body / document.documentElement, and you don't need to set a ref passing to jsx
+  const ref = useRef(document.body);
+
   const { scrollTo } = useSmoothScroll({
     ref,
     speed: 100,
@@ -37,6 +42,7 @@ export const Demo = () => {
     <>
       <button onClick={() => scrollTo('#item-20')}>scrollTo('#item-20')</button>
       <div
+        // if use custom scroll container, pass ref
         ref={ref}
         style={{
           overflowY: 'scroll',

example/Body.stories.tsx

@@ -0,0 +1,31 @@
+import useSmoothScroll from 'react-smooth-scroll-hook';
+import React, { useRef } from 'react';
+
+export const Body = () => {
+  const ref = useRef<HTMLElement>(document.documentElement);
+  const { scrollTo } = useSmoothScroll({
+    ref,
+  });
+
+  return (
+    <>
+      <button onClick={() => scrollTo('#item-20')}>scrollTo('#item-20')</button>
+      <button onClick={() => scrollTo(400)}>scrollTo(400)</button>
+      <br />
+      <div
+        style={{
+          padding: '10px',
+        }}
+      >
+        {Array(100)
+          .fill(null)
+          .map((_item, i) => (
+            <div key={i} id={`item-${i}`}>
+              item-{i}
+            </div>
+          ))}
+      </div>
+      <button onClick={() => scrollTo('#item-20')}>scrollTo('#item-20')</button>
+    </>
+  );
+};

example/DirectionX.stories.tsx

@@ -1,13 +1,13 @@
-import React, { useState, useRef } from "react";
-import useSmoothScroll from "react-smooth-scroll-hook";
+import React, { useState, useRef } from 'react';
+import useSmoothScroll from 'react-smooth-scroll-hook';
 
 export const DirectionX = () => {
   const [speed, setSpeed] = useState(200);
   const ref = useRef<HTMLDivElement>(null);
   const { scrollTo, reachTop, reachBottom, scrollToPage } = useSmoothScroll({
     ref,
-    direction: "x",
-    speed
+    direction: 'x',
+    speed,
   });
   const onChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     setSpeed(Number(evt.target.value));
@@ -28,9 +28,12 @@ export const DirectionX = () => {
       <br />
       <strong>
         Pass string:
-        <button onClick={() => scrollTo("#x-item-20")}>
+        <button onClick={() => scrollTo('#x-item-20')}>
           scrollTo('#x-item-20')
         </button>
+        <button onClick={() => scrollTo('#x-item-20', -10)}>
+          scrollTo('#x-item-20', -10)
+        </button>
       </strong>
       <br />
       <strong>
@@ -63,13 +66,13 @@ export const DirectionX = () => {
       <div
         ref={ref}
         style={{
-          overflowX: "scroll"
+          overflowX: 'scroll',
         }}
       >
         <div
           style={{
-            display: "flex",
-            padding: "10px"
+            display: 'flex',
+            padding: '10px',
           }}
         >
           {Array(50)
@@ -80,7 +83,7 @@ export const DirectionX = () => {
                 id={`x-item-${i}`}
                 style={{
                   flexShrink: 0,
-                  padding: "10px"
+                  padding: '10px',
                 }}
               >
                 x-item-{i}

src/index.tsx

@@ -51,9 +51,17 @@ const getRelativeDistance = (
       console.warn('Please pass correct selector string for scrollTo()!');
       return 0;
     }
-    const dis =
-      elm.getBoundingClientRect()[attrMap.leftTop] -
-      parent.getBoundingClientRect()[attrMap.leftTop];
+    let dis = 0;
+
+    // if parent is document.documentElement or document.body
+    if (!parent.parentElement || !parent.parentElement.parentElement) {
+      dis = elm.getBoundingClientRect()[attrMap.leftTop];
+    } else {
+      dis =
+        elm.getBoundingClientRect()[attrMap.leftTop] -
+        parent.getBoundingClientRect()[attrMap.leftTop];
+    }
+
     return dis;
   }
   return 0;
@@ -111,7 +119,7 @@ export const useSmoothScroll = ({
     isBottomEdge() ? setReachBottom(true) : setReachBottom(false);
   });
 
-  const scrollTo = (target?: number | string) => {
+  const scrollTo = (target?: number | string, offset?: number) => {
     if (!ref || !ref.current) {
       console.warn(
         'Please pass `ref` property for your scroll container! \n Get more info at https://github.com/ron0115/react-smooth-scroll-hook'
@@ -125,8 +133,15 @@ export const useSmoothScroll = ({
         'Please pass a valid property for `scrollTo()`! \n Get more info at https://github.com/ron0115/react-smooth-scroll-hook'
       );
     }
+
     const initScrollLeftTop = elm[attrMap.scrollLeftTop];
-    const distance = getRelativeDistance(target, elm, attrMap);
+
+    let distance = getRelativeDistance(target, elm, attrMap);
+    console.log(distance);
+    // set a offset
+    if (typeof offset === 'number') {
+      distance += offset;
+    }
 
     let _speed = speed;
     const cb = () => {

stories/Demo.stories.tsx renamed to stories/index.stories.tsx

@@ -9,14 +9,18 @@ export default {
 };
 import { Demo } from '../example/Demo.stories';
 import { DirectionX } from '../example/DirectionX.stories';
+import { Body } from '../example/Body.stories';
 export const Docs = () => (
   <>
     <Description markdown={require('../README.md').default} />
   </>
 );
 export { Demo };
 export { DirectionX };
+export { Body };
 // @ts-ignore
 Demo.storyName = 'Basic';
 // @ts-ignore
 DirectionX.storyName = 'More Use';
+// @ts-ignore
+Body.storyName = 'Body Parent';