🚀 RELEASE: v2.1.0

Author: pettiboy

demo-app/package-lock.json

@@ -15,7 +15,7 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.0.2",
     "react-scripts": "4.0.3",
-    "react-ui-scrollspy": "file:react-ui-scrollspy-2.0.0.tgz",
+    "react-ui-scrollspy": "file:react-ui-scrollspy-2.0.1.tgz",
     "typescript": "^4.4.4",
     "web-vitals": "^1.1.2"
   },

demo-app/package.json

@@ -1,14 +1,15 @@
 import Center from "../components/Center/Center";
 import Navigation from "../components/Demo1/Navigation";
-import ScrollSpy from "../components/src";
+// import ScrollSpy from "../components/src";
+import ScrollSpy from "react-ui-scrollspy";
 
 interface Props {}
 
 const Demo1 = (props: Props) => {
   return (
     <>
       <Navigation />
-      <ScrollSpy scrollThrottle={100}>
+      <ScrollSpy scrollThrottle={100} useBoxMethod={false}>
         <Center id="orange" backgroundColor={"orange"}>
           <h1>Orange</h1>
         </Center>

demo-app/src/pages/Demo1.tsx

@@ -1,6 +1,7 @@
 import React, { useRef } from "react";
 import Center from "../components/Center/Center";
-import ScrollSpy from "../components/src";
+// import ScrollSpy from "../components/src";
+import ScrollSpy from "react-ui-scrollspy";
 
 interface Props {}
 
@@ -77,10 +78,10 @@ const Demo2 = (props: Props) => {
               // }}
             >
               <ScrollSpy
-                useBoxMethod
                 // parentScrollContainerRef={parentScrollContainerRef}
                 activeClass="ss-active-demo-2"
                 scrollThrottle={100}
+                useBoxMethod
               >
                 <Center id="section-1" backgroundColor="orange" height="150vh">
                   <p>Section 1</p>

demo-app/src/pages/Demo2.tsx

@@ -14,10 +14,11 @@ creates a `.tgz`
 ```bash
 npm run build
 npm pack
-mv react-ui-scrollspy-2.0.0.tgz ./demo-app
+mv react-ui-scrollspy-2.1.0.tgz ./demo-app
 cd demo-app
 npm uninstall react-ui-scrollspy
-npm install react-ui-scrollspy-2.0.0.tgz --production
+npm install react-ui-scrollspy-2.1.0.tgz --production
+cd ..
 ```
 
 ## Commit Messages

dev.md

@@ -1,6 +1,6 @@
 {
   "name": "react-ui-scrollspy",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Simple, Easy To Use and Customisable ScrollSpy component for react with callback, typescript and throttle support among others",
   "main": "dist/index.js",
   "scripts": {

dist/index.js

@@ -88,11 +88,17 @@ const ScrollSpy = ({
     const rectInView = el.getBoundingClientRect();
 
     if (useBoxMethod) {
-      const hitbox_top = window.innerHeight;
+      const useHeight = parentScrollContainerRef?.current
+        ? parentScrollContainerRef?.current.offsetHeight
+        : window.innerHeight;
+      const hitbox_top = useHeight;
       const element_top = rectInView.top;
-      const element_bottom = rectInView.top + window.innerHeight;
+      const element_bottom = rectInView.top + useHeight;
 
-      return hitbox_top < element_bottom && hitbox_top > element_top;
+      return (
+        hitbox_top < element_bottom + offsetBottom &&
+        hitbox_top > element_top - offsetTop
+      );
     } else {
       // this decides how much of the element should be visible
       const leniency = parentScrollContainerRef?.current