diff --git a/src/back/routes/common/horizontal-scroller/horizontal-scroller.stimulus.ts b/src/back/routes/common/horizontal-scroller/horizontal-scroller.stimulus.ts index e1a5da5..fce7fdb 100644 --- a/src/back/routes/common/horizontal-scroller/horizontal-scroller.stimulus.ts +++ b/src/back/routes/common/horizontal-scroller/horizontal-scroller.stimulus.ts @@ -12,9 +12,11 @@ export default class HorizontalScroller extends Controller { visibility: number[]; + intersectionObservers: IntersectionObserver[]; + connect() { this.visibility = this.elementTargets.map(() => 0); - [0, 0.5, 0.9, 1].forEach((threshold) => { + this.intersectionObservers = [0, 0.5, 0.9, 1].map((threshold) => { const observer = new IntersectionObserver( (events) => this.handleIntersection(events), { @@ -23,12 +25,23 @@ export default class HorizontalScroller extends Controller { threshold, } ); - this.elementTargets.forEach((e) => observer.observe(e)); + return observer; }); + this.observe(); this.refreshMarkers(); } + markerTargetConnected() { + this.observe(); + } + + observe() { + this.intersectionObservers?.forEach((observer) => + this.elementTargets.forEach((e) => observer.observe(e)) + ); + } + handleIntersection(events: IntersectionObserverEntry[]) { events.forEach((event) => { const element_index = this.elementTargets.indexOf(