From c11b272cba6551395ff9eae97de8fc7bde39bed7 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Thu, 11 Mar 2021 10:43:12 +0300
Subject: [PATCH] Fine-tuning rootMargin prop

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/+preferences/preferences.tsx | 3 ++-
 src/renderer/components/scroll-spy/scroll-spy.tsx    | 9 ++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/+preferences/preferences.tsx b/src/renderer/components/+preferences/preferences.tsx
index a144f8e787..4256b48599 100644
--- a/src/renderer/components/+preferences/preferences.tsx
+++ b/src/renderer/components/+preferences/preferences.tsx
@@ -30,9 +30,10 @@ export class Preferences extends React.Component {
   render() {
     const { preferences } = userStore;
     const header = <h2>Preferences</h2>;
+    const rootMargin = "80px 0px -85%"; // Cut header size from the top and 85% from the bottom of viewport
 
     return (
-      <ScrollSpy render={navigation => (
+      <ScrollSpy rootMargin={rootMargin} render={navigation => (
         <PageLayout
           showOnTop
           navigation={navigation}
diff --git a/src/renderer/components/scroll-spy/scroll-spy.tsx b/src/renderer/components/scroll-spy/scroll-spy.tsx
index b9682833ee..875866362b 100644
--- a/src/renderer/components/scroll-spy/scroll-spy.tsx
+++ b/src/renderer/components/scroll-spy/scroll-spy.tsx
@@ -4,6 +4,7 @@ import { NavigationTree } from "../tree-view";
 
 interface Props extends React.DOMAttributes<HTMLElement> {
   render: (data: NavigationTree[]) => JSX.Element
+  rootMargin?: string // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer
 }
 
 export function ScrollSpy(props: Props) {
@@ -66,7 +67,7 @@ export function ScrollSpy(props: Props) {
       // Shrinking root area from the bottom
       // Allows to fire observer event only if target scrolled up to top of the page)
       // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer
-      rootMargin: "0px 0px -85%",
+      rootMargin: props.rootMargin,
     };
 
     sections.current.forEach((section) => {
@@ -94,3 +95,9 @@ export function ScrollSpy(props: Props) {
     </div>
   );
 }
+
+ScrollSpy.defaultProps = {
+  // Shrinking root area from the bottom
+  // Allows to fire observer event only if target scrolled up to top of the page)
+  rootMargin: "0px 0px -85%"
+};