fix(Incito): Handle non-body scroll container

tjek · Jun 7, 2024 · e33d483 · e33d483
1 parent 6d5e31f
commit e33d483
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 9 deletions.
diff --git a/examples/incito-publication.html b/examples/incito-publication.html
@@ -31,9 +31,13 @@
         </style>
     </head>
     <body>
-        <div class="sgn__incito">
-            <div class="sgn-incito__progress"></div>
+        earlier content
+        <div style="max-height: 90vh; overflow: auto">
+            <div class="sgn__incito">
+                <div class="sgn-incito__progress"></div>
+            </div>
         </div>
+        later content
 
         <script
             src="../dist/shopgun-sdk/sgn-sdk.js"
@@ -48,6 +52,7 @@
                 id: SGN.util.getQueryParam('id'),
                 eventTracker: SGN.config.get('eventTracker')
             });
+            bootstrapper.enableLazyLoading = true;
 
             this.bootstrapper.fetch(function (error, res) {
                 if (error) return console.error(error);

diff --git a/lib/incito-browser/incito.ts b/lib/incito-browser/incito.ts
@@ -1,5 +1,6 @@
 import fetch from 'cross-fetch';
 import MicroEvent from '../../vendor/microevent';
+import {getScrollContainer} from '../util';
 import './incito.styl';
 import {IIncito, TextView} from './types';
 
@@ -695,6 +696,7 @@ export default class Incito extends MicroEvent<{
     sectionHidden: [{sectionId: string; sectionPosition: number}];
 }> {
     containerEl: HTMLElement;
+    scrollContainerEl: HTMLElement;
     incito: IIncito;
     el: HTMLDivElement;
     ids: Record<string, unknown>;
@@ -712,6 +714,7 @@ export default class Incito extends MicroEvent<{
         super();
 
         this.containerEl = containerEl;
+        this.scrollContainerEl = getScrollContainer(containerEl);
         this.incito = incito;
         this.el = document.createElement('div');
         this.ids = {};
@@ -932,7 +935,7 @@ export default class Incito extends MicroEvent<{
                     this.sectionVisibility.set(target, newVisibility);
                     this.triggerSectionVisibility(target, newVisibility);
                 }),
-            {rootMargin: '5px 0px'}
+            {rootMargin: '5px 0px', root: this.scrollContainerEl}
         );
         this.lazyObserver = new IntersectionObserver(
             (entries) => {
@@ -943,7 +946,7 @@ export default class Incito extends MicroEvent<{
                     }
                 });
             },
-            {rootMargin: '500px 0px'}
+            {rootMargin: '500px 0px', root: this.scrollContainerEl}
         );
         this.videoObserver = new IntersectionObserver(
             (entries) => {
@@ -962,7 +965,7 @@ export default class Incito extends MicroEvent<{
                     }
                 });
             },
-            {threshold: 0.1}
+            {threshold: 0.1, root: this.scrollContainerEl}
         );
     }
 

diff --git a/lib/kits/incito-publication/controls.ts b/lib/kits/incito-publication/controls.ts
@@ -1,26 +1,41 @@
+import {getScrollContainer} from '../../util';
 import Viewer from './viewer';
 
 export default class Controls {
     viewer: Viewer;
     progressEl: HTMLElement | null;
+    scrollContainerEl: HTMLElement | null;
     constructor(viewer: Viewer) {
         this.viewer = viewer;
         this.progressEl = this.viewer.el.querySelector('.sgn-incito__progress');
 
         if (this.progressEl) {
+            this.scrollContainerEl = getScrollContainer(this.viewer.el);
+
             this.scroll();
-            window.addEventListener('scroll', this.scroll, false);
+            this.scrollContainerEl?.addEventListener(
+                'scroll',
+                this.scroll,
+                false
+            );
         }
     }
 
     destroy = () => {
-        window.removeEventListener('scroll', this.scroll, false);
+        this.scrollContainerEl?.removeEventListener(
+            'scroll',
+            this.scroll,
+            false
+        );
     };
 
     scroll = () => {
+        if (!this.scrollContainerEl) return;
+
         const progress = Math.round(
-            (window.pageYOffset /
-                (document.body.scrollHeight - window.innerHeight)) *
+            (this.scrollContainerEl.scrollTop /
+                (this.scrollContainerEl.scrollHeight -
+                    this.scrollContainerEl.clientHeight)) *
                 100
         );
 

diff --git a/lib/util.ts b/lib/util.ts
@@ -115,3 +115,18 @@ export const off = (
 ) =>
     //@ts-expect-error
     Gator(el).off(events, selector, callback);
+
+const overflowRE = /auto|scroll/;
+export function getScrollContainer(target: HTMLElement) {
+    let element: HTMLElement | null = target;
+    while (element) {
+        const {overflow, overflowY, overflowX} = getComputedStyle(element);
+        if (overflowRE.test(overflow + overflowY + overflowX)) {
+            return element;
+        }
+
+        element = element.parentElement;
+    }
+
+    return document.body;
+}