Fix viewer scrollable container

lib/incito-browser/__tests__/incito.test-jsdom.ts

@@ -10,7 +10,7 @@ describe('Incito', () => {
 
         // @ts-expect-error can't treat the json import as const 🤷‍♀️
         const incito: IIncito = data;
-        const incitoViewer = new Incito(main, {incito});
+        const incitoViewer = new Incito(main, {incito}, '');
 
         expect(() => incitoViewer.start()).not.toThrow();
 

lib/incito-browser/incito.ts

@@ -695,6 +695,7 @@ export default class Incito extends MicroEvent<{
     sectionHidden: [{sectionId: string; sectionPosition: number}];
 }> {
     containerEl: HTMLElement;
+    scrollableContainer: string;
     incito: IIncito;
     el: HTMLDivElement;
     ids: Record<string, unknown>;
@@ -707,11 +708,13 @@ export default class Incito extends MicroEvent<{
     sectionVisibility: Map<HTMLElement, boolean>;
     constructor(
         containerEl: HTMLElement,
-        {incito, canLazyload}: {incito: IIncito; canLazyload?: boolean}
+        {incito, canLazyload}: {incito: IIncito; canLazyload?: boolean},
+        scrollableContainer: string
     ) {
         super();
 
         this.containerEl = containerEl;
+        this.scrollableContainer = scrollableContainer;
         this.incito = incito;
         this.el = document.createElement('div');
         this.ids = {};
@@ -920,6 +923,10 @@ export default class Incito extends MicroEvent<{
         window.addEventListener('pagehide', this.handlePageHide);
         window.addEventListener('beforeunload', this.handleBeforeUnload);
 
+        const scrollableContainerEl = this.scrollableContainer
+            ? document.querySelector(this.scrollableContainer)
+            : null;
+
         this.sectionObserver = new IntersectionObserver(
             (entries) =>
                 entries.forEach(({target, isIntersecting: newVisibility}) => {
@@ -932,7 +939,7 @@ export default class Incito extends MicroEvent<{
                     this.sectionVisibility.set(target, newVisibility);
                     this.triggerSectionVisibility(target, newVisibility);
                 }),
-            {rootMargin: '5px 0px'}
+            {rootMargin: '5px 0px', root: scrollableContainerEl}
         );
         this.lazyObserver = new IntersectionObserver(
             (entries) => {
@@ -943,7 +950,7 @@ export default class Incito extends MicroEvent<{
                     }
                 });
             },
-            {rootMargin: '500px 0px'}
+            {rootMargin: '500px 0px', root: scrollableContainerEl}
         );
         this.videoObserver = new IntersectionObserver(
             (entries) => {

lib/kits/core-ui/incito-publication.ts

@@ -197,6 +197,9 @@ const IncitoPublication = (
         // @ts-expect-error
         bootstrapper = new Bootstrapper(options);
         bootstrapper.enableLazyLoading = scriptEls.enableLazyload;
+        bootstrapper.scrollableContainer = scriptEls.enableSidebar
+            ? '.incito'
+            : '.sgn__incito';
 
         const data = await bootstrapper.fetch();
 

lib/kits/incito-publication/bootstrapper.ts

@@ -68,6 +68,7 @@ export default class Bootstrapper {
     featureLabels = this.getFeatureLabels();
     versionsSupported = ['1.0.0'];
     enableLazyLoading = false;
+    scrollableContainer: string;
     options: BootstrapperInit;
     maxWidth: number;
     // @ts-expect-error
@@ -182,11 +183,15 @@ export default class Bootstrapper {
             );
         }
 
-        const viewer = new Viewer(this.options.el, {
-            details,
-            incito,
-            eventTracker: this.options.eventTracker
-        });
+        const viewer = new Viewer(
+            this.options.el,
+            {
+                details,
+                incito,
+                eventTracker: this.options.eventTracker
+            },
+            this.scrollableContainer
+        );
         const controls = new Controls(viewer);
 
         viewer.incito.bind('destroyed', controls.destroy);

lib/kits/incito-publication/viewer.test-jsdom.ts

@@ -16,11 +16,18 @@ describe('SGN.IncitoPublicationKit.Viewer', () => {
 
         const mountPoint = document.createElement('div');
 
-        const viewer = new Viewer(mountPoint, {
-            details: {id: 'incito-id', types: ['paged', 'incito']} as V2Catalog,
-            incito: dummyIncito,
-            eventTracker: fakeEventTracker as any
-        });
+        const viewer = new Viewer(
+            mountPoint,
+            {
+                details: {
+                    id: 'incito-id',
+                    types: ['paged', 'incito']
+                } as V2Catalog,
+                incito: dummyIncito,
+                eventTracker: fakeEventTracker as any
+            },
+            ''
+        );
 
         viewer.start();
 

lib/kits/incito-publication/viewer.ts

@@ -17,14 +17,24 @@ class Viewer extends MicroEvent {
     options: ViewerInit;
     incito: Incito;
     _eventTracking: EventTracking;
-    constructor(el: HTMLElement, options: ViewerInit) {
+    scrollableContainer: string;
+    constructor(
+        el: HTMLElement,
+        options: ViewerInit,
+        scrollableContainer: string
+    ) {
         super();
 
         this.el = el;
         this.options = options;
-        this.incito = new Incito(this.el, {
-            incito: this.options.incito
-        });
+        this.scrollableContainer = scrollableContainer;
+        this.incito = new Incito(
+            this.el,
+            {
+                incito: this.options.incito
+            },
+            this.scrollableContainer
+        );
         this._eventTracking = new EventTracking(
             this.options.eventTracker,
             this.options.details