vevet 2.0.1-dev.23 → 2.0.1-dev.24

package/build/cjs/components/scroll/scrollable/ScrollView.js

@@ -49,7 +49,8 @@ var ScrollView = /** @class */ (function (_super) {
         if (init === void 0) { init = true; }
         var _this = _super.call(this, initialProp, false) || this;
         _this._scrollEvent = undefined;
-        _this._intersectionObserver = undefined;
+        _this._intersectionObserverIn = undefined;
+        _this._intersectionObserverOut = undefined;
         _this._firstStart = true;
         _this._elements = __spreadArray([], _this.prop.elements);
         // initialize the class
@@ -117,17 +118,27 @@ var ScrollView = /** @class */ (function (_super) {
                 ? 0 : scrollContainerBounding.width * (1 - this.prop.threshold) * -1;
             var yMargin = this._firstStart
                 ? 0 : scrollContainerBounding.height * (1 - this.prop.threshold) * -1;
-            // create intersection observer
-            this._intersectionObserver = new IntersectionObserver(this._handleIntersectionObserver.bind(this), {
+            // create intersection observers
+            this._intersectionObserverIn = new IntersectionObserver(this._handleIntersectionObserverIn.bind(this), {
                 root: this.intersectionRoot,
                 threshold: 0,
                 rootMargin: "0px " + xMargin + "px " + yMargin + "px 0px",
             });
-            // add elements
             this.elements.forEach(function (el) {
                 var _a;
-                (_a = _this._intersectionObserver) === null || _a === void 0 ? void 0 : _a.observe(el);
+                (_a = _this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.observe(el);
             });
+            if (this.prop.states === 'inout') {
+                this._intersectionObserverOut = new IntersectionObserver(this._handleIntersectionObserverOut.bind(this), {
+                    root: this.intersectionRoot,
+                    threshold: 0,
+                    rootMargin: '0px 0px 0px 0px',
+                });
+                this.elements.forEach(function (el) {
+                    var _a;
+                    (_a = _this._intersectionObserverOut) === null || _a === void 0 ? void 0 : _a.observe(el);
+                });
+            }
         }
         else {
             // set scroll bounding events
@@ -141,21 +152,22 @@ var ScrollView = /** @class */ (function (_super) {
      * Remove View events: scroll or intersection
      */
     ScrollView.prototype._removeViewEvents = function () {
+        var _a, _b;
         // remove scroll events
         if (this._scrollEvent) {
             this._scrollEvent.remove();
             this._scrollEvent = undefined;
         }
-        // destroy intersection observer
-        if (this._intersectionObserver) {
-            this._intersectionObserver.disconnect();
-            this._intersectionObserver = undefined;
-        }
+        // destroy intersection observers
+        (_a = this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._intersectionObserverIn = undefined;
+        (_b = this._intersectionObserverOut) === null || _b === void 0 ? void 0 : _b.disconnect();
+        this._intersectionObserverOut = undefined;
     };
     /**
      * Event on IntersectionObserver
      */
-    ScrollView.prototype._handleIntersectionObserver = function (data) {
+    ScrollView.prototype._handleIntersectionObserverIn = function (data) {
         var parentBounding = this._firstStart ? this.scrollContainerBounding : false;
         for (var index = 0; index < data.length; index += 1) {
             var entry = data[index];
@@ -163,7 +175,9 @@ var ScrollView = /** @class */ (function (_super) {
             if (this._firstStart && !!parentBounding && entry.isIntersecting) {
                 delay = this._elementInViewportData(entry.target, parentBounding).delay;
             }
-            this._handleInOut(entry.target, entry.isIntersecting, delay);
+            if (entry.isIntersecting) {
+                this._handleInOut(entry.target, entry.isIntersecting, delay);
+            }
         }
         this._processUnusedElements();
         // change states
@@ -172,6 +186,17 @@ var ScrollView = /** @class */ (function (_super) {
             this.resize();
         }
     };
+    /**
+     * Event on IntersectionObserver
+     */
+    ScrollView.prototype._handleIntersectionObserverOut = function (data) {
+        for (var index = 0; index < data.length; index += 1) {
+            var entry = data[index];
+            if (!entry.isIntersecting) {
+                this._handleInOut(entry.target, entry.isIntersecting, 0);
+            }
+        }
+    };
     /**
      * Event on Scroll
      */
@@ -194,7 +219,9 @@ var ScrollView = /** @class */ (function (_super) {
             var el = this.elements[index];
             var elData = this._elementInViewportData(el, scrollContainerBounding);
             var delay = elData.isIntersecting ? elData.delay : 0;
-            this._handleInOut(el, elData.isIntersecting, delay);
+            if (typeof elData.isIntersecting === 'boolean') {
+                this._handleInOut(el, elData.isIntersecting, delay);
+            }
         }
         this._processUnusedElements();
         // change states
@@ -210,7 +237,7 @@ var ScrollView = /** @class */ (function (_super) {
         var threshold = this._firstStart ? 1 : propThreshold;
         var bounding = el.getBoundingClientRect();
         // check if the element is intersecting
-        var isIntersecting = false;
+        var isIntersecting;
         if (bounding.top < parentBounding.top + parentBounding.height * threshold
             && bounding.left < parentBounding.left + parentBounding.width * threshold) {
             if (states === 'in') {
@@ -224,6 +251,10 @@ var ScrollView = /** @class */ (function (_super) {
                 isIntersecting = true;
             }
         }
+        else if (bounding.top > parentBounding.top + parentBounding.height
+            || bounding.left > parentBounding.left + parentBounding.width) {
+            isIntersecting = false;
+        }
         // calculate delay only if it is enabled & calculations
         // are done for the first time
         var delay = 0;
@@ -281,9 +312,9 @@ var ScrollView = /** @class */ (function (_super) {
         // remove unused elements
         var elementsToRemove = this._elements.filter(function (el) { return el.scrollViewIn; });
         elementsToRemove.forEach(function (el) {
-            if (_this._intersectionObserver) {
-                _this._intersectionObserver.unobserve(el);
-            }
+            var _a, _b;
+            (_a = _this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.unobserve(el);
+            (_b = _this._intersectionObserverOut) === null || _b === void 0 ? void 0 : _b.unobserve(el);
         });
         this._elements = this._elements.filter(function (el) { return !el.scrollViewIn; });
     };
@@ -292,12 +323,12 @@ var ScrollView = /** @class */ (function (_super) {
      */
     ScrollView.prototype.addElement = function (element) {
         var _this = this;
+        var _a, _b;
         var viewEl = element;
         viewEl.scrollViewIn = undefined;
         this._elements.push(element);
-        if (this._intersectionObserver) {
-            this._intersectionObserver.observe(element);
-        }
+        (_a = this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.observe(element);
+        (_b = this._intersectionObserverOut) === null || _b === void 0 ? void 0 : _b.observe(element);
         if (this.prop.enabled) {
             this.seekBounding();
         }
@@ -311,12 +342,12 @@ var ScrollView = /** @class */ (function (_super) {
      * Remove a view element
      */
     ScrollView.prototype.removeElement = function (element) {
+        var _a, _b;
         var viewEl = element;
         viewEl.scrollViewIn = undefined;
         this._elements = this._elements.filter(function (el) { return el !== element; });
-        if (this._intersectionObserver) {
-            this._intersectionObserver.unobserve(element);
-        }
+        (_a = this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.unobserve(element);
+        (_b = this._intersectionObserverOut) === null || _b === void 0 ? void 0 : _b.unobserve(element);
     };
     /**
      * Remove all view elements
@@ -324,9 +355,7 @@ var ScrollView = /** @class */ (function (_super) {
     ScrollView.prototype.removeElements = function () {
         var _this = this;
         this._elements.forEach(function (el) {
-            if (_this._intersectionObserver) {
-                _this._intersectionObserver.unobserve(el);
-            }
+            _this.removeElement(el);
         });
         this._elements = [];
     };

package/build/es/components/scroll/scrollable/ScrollView.js

@@ -10,7 +10,8 @@ export class ScrollView extends ScrollEventsBase {
     constructor(initialProp, init = true) {
         super(initialProp, false);
         this._scrollEvent = undefined;
-        this._intersectionObserver = undefined;
+        this._intersectionObserverIn = undefined;
+        this._intersectionObserverOut = undefined;
         this._firstStart = true;
         this._elements = [...this.prop.elements];
         // initialize the class
@@ -67,17 +68,27 @@ export class ScrollView extends ScrollEventsBase {
                 ? 0 : scrollContainerBounding.width * (1 - this.prop.threshold) * -1;
             const yMargin = this._firstStart
                 ? 0 : scrollContainerBounding.height * (1 - this.prop.threshold) * -1;
-            // create intersection observer
-            this._intersectionObserver = new IntersectionObserver(this._handleIntersectionObserver.bind(this), {
+            // create intersection observers
+            this._intersectionObserverIn = new IntersectionObserver(this._handleIntersectionObserverIn.bind(this), {
                 root: this.intersectionRoot,
                 threshold: 0,
                 rootMargin: `0px ${xMargin}px ${yMargin}px 0px`,
             });
-            // add elements
             this.elements.forEach((el) => {
                 var _a;
-                (_a = this._intersectionObserver) === null || _a === void 0 ? void 0 : _a.observe(el);
+                (_a = this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.observe(el);
             });
+            if (this.prop.states === 'inout') {
+                this._intersectionObserverOut = new IntersectionObserver(this._handleIntersectionObserverOut.bind(this), {
+                    root: this.intersectionRoot,
+                    threshold: 0,
+                    rootMargin: '0px 0px 0px 0px',
+                });
+                this.elements.forEach((el) => {
+                    var _a;
+                    (_a = this._intersectionObserverOut) === null || _a === void 0 ? void 0 : _a.observe(el);
+                });
+            }
         }
         else {
             // set scroll bounding events
@@ -91,21 +102,22 @@ export class ScrollView extends ScrollEventsBase {
      * Remove View events: scroll or intersection
      */
     _removeViewEvents() {
+        var _a, _b;
         // remove scroll events
         if (this._scrollEvent) {
             this._scrollEvent.remove();
             this._scrollEvent = undefined;
         }
-        // destroy intersection observer
-        if (this._intersectionObserver) {
-            this._intersectionObserver.disconnect();
-            this._intersectionObserver = undefined;
-        }
+        // destroy intersection observers
+        (_a = this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._intersectionObserverIn = undefined;
+        (_b = this._intersectionObserverOut) === null || _b === void 0 ? void 0 : _b.disconnect();
+        this._intersectionObserverOut = undefined;
     }
     /**
      * Event on IntersectionObserver
      */
-    _handleIntersectionObserver(data) {
+    _handleIntersectionObserverIn(data) {
         const parentBounding = this._firstStart ? this.scrollContainerBounding : false;
         for (let index = 0; index < data.length; index += 1) {
             const entry = data[index];
@@ -113,7 +125,9 @@ export class ScrollView extends ScrollEventsBase {
             if (this._firstStart && !!parentBounding && entry.isIntersecting) {
                 delay = this._elementInViewportData(entry.target, parentBounding).delay;
             }
-            this._handleInOut(entry.target, entry.isIntersecting, delay);
+            if (entry.isIntersecting) {
+                this._handleInOut(entry.target, entry.isIntersecting, delay);
+            }
         }
         this._processUnusedElements();
         // change states
@@ -122,6 +136,17 @@ export class ScrollView extends ScrollEventsBase {
             this.resize();
         }
     }
+    /**
+     * Event on IntersectionObserver
+     */
+    _handleIntersectionObserverOut(data) {
+        for (let index = 0; index < data.length; index += 1) {
+            const entry = data[index];
+            if (!entry.isIntersecting) {
+                this._handleInOut(entry.target, entry.isIntersecting, 0);
+            }
+        }
+    }
     /**
      * Event on Scroll
      */
@@ -144,7 +169,9 @@ export class ScrollView extends ScrollEventsBase {
             const el = this.elements[index];
             const elData = this._elementInViewportData(el, scrollContainerBounding);
             const delay = elData.isIntersecting ? elData.delay : 0;
-            this._handleInOut(el, elData.isIntersecting, delay);
+            if (typeof elData.isIntersecting === 'boolean') {
+                this._handleInOut(el, elData.isIntersecting, delay);
+            }
         }
         this._processUnusedElements();
         // change states
@@ -160,7 +187,7 @@ export class ScrollView extends ScrollEventsBase {
         const threshold = this._firstStart ? 1 : propThreshold;
         const bounding = el.getBoundingClientRect();
         // check if the element is intersecting
-        let isIntersecting = false;
+        let isIntersecting;
         if (bounding.top < parentBounding.top + parentBounding.height * threshold
             && bounding.left < parentBounding.left + parentBounding.width * threshold) {
             if (states === 'in') {
@@ -174,6 +201,10 @@ export class ScrollView extends ScrollEventsBase {
                 isIntersecting = true;
             }
         }
+        else if (bounding.top > parentBounding.top + parentBounding.height
+            || bounding.left > parentBounding.left + parentBounding.width) {
+            isIntersecting = false;
+        }
         // calculate delay only if it is enabled & calculations
         // are done for the first time
         let delay = 0;
@@ -228,9 +259,9 @@ export class ScrollView extends ScrollEventsBase {
         // remove unused elements
         const elementsToRemove = this._elements.filter((el) => el.scrollViewIn);
         elementsToRemove.forEach((el) => {
-            if (this._intersectionObserver) {
-                this._intersectionObserver.unobserve(el);
-            }
+            var _a, _b;
+            (_a = this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.unobserve(el);
+            (_b = this._intersectionObserverOut) === null || _b === void 0 ? void 0 : _b.unobserve(el);
         });
         this._elements = this._elements.filter((el) => !el.scrollViewIn);
     }
@@ -238,12 +269,12 @@ export class ScrollView extends ScrollEventsBase {
      * Add a view element
      */
     addElement(element) {
+        var _a, _b;
         const viewEl = element;
         viewEl.scrollViewIn = undefined;
         this._elements.push(element);
-        if (this._intersectionObserver) {
-            this._intersectionObserver.observe(element);
-        }
+        (_a = this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.observe(element);
+        (_b = this._intersectionObserverOut) === null || _b === void 0 ? void 0 : _b.observe(element);
         if (this.prop.enabled) {
             this.seekBounding();
         }
@@ -257,21 +288,19 @@ export class ScrollView extends ScrollEventsBase {
      * Remove a view element
      */
     removeElement(element) {
+        var _a, _b;
         const viewEl = element;
         viewEl.scrollViewIn = undefined;
         this._elements = this._elements.filter((el) => el !== element);
-        if (this._intersectionObserver) {
-            this._intersectionObserver.unobserve(element);
-        }
+        (_a = this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.unobserve(element);
+        (_b = this._intersectionObserverOut) === null || _b === void 0 ? void 0 : _b.unobserve(element);
     }
     /**
      * Remove all view elements
      */
     removeElements() {
         this._elements.forEach((el) => {
-            if (this._intersectionObserver) {
-                this._intersectionObserver.unobserve(el);
-            }
+            this.removeElement(el);
         });
         this._elements = [];
     }

package/build/types/components/scroll/scrollable/ScrollView.d.ts

@@ -78,9 +78,13 @@ export declare class ScrollView<StaticProp extends NScrollView.StaticProp = NScr
      */
     protected _scrollEvent?: IRemovable;
     /**
-     * Intersection observer
+     * Intersection observer - type IN
      */
-    protected _intersectionObserver?: IntersectionObserver;
+    protected _intersectionObserverIn?: IntersectionObserver;
+    /**
+     * Intersection observer - type OUT
+     */
+    protected _intersectionObserverOut?: IntersectionObserver;
     /**
      * If first start
      */
@@ -109,7 +113,11 @@ export declare class ScrollView<StaticProp extends NScrollView.StaticProp = NScr
     /**
      * Event on IntersectionObserver
      */
-    protected _handleIntersectionObserver(data: IntersectionObserverEntry[]): void;
+    protected _handleIntersectionObserverIn(data: IntersectionObserverEntry[]): void;
+    /**
+     * Event on IntersectionObserver
+     */
+    protected _handleIntersectionObserverOut(data: IntersectionObserverEntry[]): void;
     /**
      * Event on Scroll
      */

package/build/types/components/scroll/scrollable/ScrollView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../../../../../src/ts/components/scroll/scrollable/ScrollView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAQlE,yBAAiB,WAAW,CAAC;IAEzB;;OAEG;IACH,UAAiB,UAAW,SAAQ,iBAAiB,CAAC,UAAU;QAC5D;;;;;WAKG;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB;;;WAGG;QACH,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;QACrB;;;;WAIG;QACH,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB;;;WAGG;QACH,MAAM,CAAC,EAAE,IAAI,GAAG,OAAO,CAAC;QACxB;;;WAGG;QACH,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB;;;WAGG;QACH,QAAQ,CAAC,EAAE,KAAK,GAAG;YACf,GAAG,EAAE,MAAM,CAAC;YACZ,GAAG,EAAE,GAAG,GAAG,GAAG,CAAC;SAClB,CAAC;QACF;;;WAGG;QACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;KACrC;IAED;;OAEG;IACH,UAAiB,cAAe,SAAQ,iBAAiB,CAAC,cAAc;KAAI;IAE5E;;OAEG;IACH,UAAiB,EAAG,SAAQ,OAAO;QAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;KAC1B;IAED;;OAEG;IACH,UAAiB,cAAe,SAAQ,iBAAiB,CAAC,cAAc;QACpE,IAAI,EAAE,EAAE,CAAC;QACT,KAAK,EAAE,EAAE,CAAC;KACb;CAEJ;AAID;;GAEG;AACH,qBAAa,UAAU,CACnB,UAAU,SAAS,WAAW,CAAC,UAAU,GAAG,WAAW,CAAC,UAAU,EAClE,cAAc,SAAS,WAAW,CAAC,cAAc,GAAG,WAAW,CAAC,cAAc,EAC9E,cAAc,SAAS,WAAW,CAAC,cAAc,GAAG,WAAW,CAAC,cAAc,CAChF,SAAQ,gBAAgB,CACtB,UAAU,EACV,cAAc,EACd,cAAc,CACjB;IACG,IAAI,MAAM,WAET;IAED,SAAS,CAAC,eAAe,CACrB,CAAC,SAAS,kBAAkB,CAAC,UAAU,GAAG,cAAc,CAAC,KACvD,CAAC;IAgBP;;OAEG;IACH,SAAS,CAAC,YAAY,CAAC,EAAE,UAAU,CAAC;IACpC;;OAEG;IACH,SAAS,CAAC,qBAAqB,CAAC,EAAE,oBAAoB,CAAC;IAEvD;;OAEG;IACH,SAAS,CAAC,WAAW,EAAE,OAAO,CAAC;IAE/B,SAAS,CAAC,SAAS,EAAE,WAAW,CAAC,EAAE,EAAE,CAAC;IACtC;;OAEG;IACH,IAAI,QAAQ,qBAEX;gBAKG,WAAW,CAAC,EAAE,CAAC,UAAU,GAAG,cAAc,CAAC,EAC3C,IAAI,UAAO;IAeR,IAAI;IAKX,SAAS,CAAC,UAAU;IAQpB,SAAS,CAAC,aAAa;IAKvB;;OAEG;IACI,MAAM;IAQb;;OAEG;IACH,SAAS,CAAC,cAAc;IA+BxB;;OAEG;IACH,SAAS,CAAC,iBAAiB;IAa3B;;OAEG;IACH,SAAS,CAAC,2BAA2B,CACjC,IAAI,EAAE,yBAAyB,EAAE;IAuBrC;;OAEG;IACH,SAAS,CAAC,aAAa;IAIvB;;;OAGG;IACI,YAAY;IAwBnB;;OAEG;IACH,SAAS,CAAC,sBAAsB,CAC5B,EAAE,EAAE,OAAO,EACX,cAAc,EAAE,iBAAiB,CAAC,YAAY;;;;IA2ClD;;OAEG;IACH,SAAS,CAAC,YAAY,CAClB,EAAE,EAAE,WAAW,CAAC,EAAE,EAClB,UAAU,EAAE,OAAO,EACnB,KAAK,SAAI;IAgCb;;OAEG;IACH,SAAS,CAAC,sBAAsB;IAehC;;OAEG;IACI,UAAU,CACb,OAAO,EAAE,OAAO,GACjB,UAAU;IAiBb;;OAEG;IACI,aAAa,CAChB,OAAO,EAAE,OAAO;IAUpB;;OAEG;IACI,cAAc;IAWrB;;OAEG;IACH,SAAS,CAAC,QAAQ;CAIrB"}
+{"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../../../../../src/ts/components/scroll/scrollable/ScrollView.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vevet",
-  "version": "2.0.1-dev.23",
+  "version": "2.0.1-dev.24",
   "description": "VEVET - A JavaScript library",
   "browserslist": [
     "since 2015"

package/src/ts/components/scroll/scrollable/ScrollView.ts

@@ -120,9 +120,13 @@ export class ScrollView <
      */
     protected _scrollEvent?: IRemovable;
     /**
-     * Intersection observer
+     * Intersection observer - type IN
      */
-    protected _intersectionObserver?: IntersectionObserver;
+    protected _intersectionObserverIn?: IntersectionObserver;
+    /**
+     * Intersection observer - type OUT
+     */
+    protected _intersectionObserverOut?: IntersectionObserver;
 
     /**
      * If first start
@@ -146,7 +150,8 @@ export class ScrollView <
         super(initialProp, false);
 
         this._scrollEvent = undefined;
-        this._intersectionObserver = undefined;
+        this._intersectionObserverIn = undefined;
+        this._intersectionObserverOut = undefined;
         this._firstStart = true;
         this._elements = [...this.prop.elements];
 
@@ -197,19 +202,31 @@ export class ScrollView <
                 ? 0 : scrollContainerBounding.width * (1 - this.prop.threshold) * -1;
             const yMargin = this._firstStart
                 ? 0 : scrollContainerBounding.height * (1 - this.prop.threshold) * -1;
-            // create intersection observer
-            this._intersectionObserver = new IntersectionObserver(
-                this._handleIntersectionObserver.bind(this),
+            // create intersection observers
+            this._intersectionObserverIn = new IntersectionObserver(
+                this._handleIntersectionObserverIn.bind(this),
                 {
                     root: this.intersectionRoot,
                     threshold: 0,
                     rootMargin: `0px ${xMargin}px ${yMargin}px 0px`,
                 },
             );
-            // add elements
             this.elements.forEach((el) => {
-                this._intersectionObserver?.observe(el);
+                this._intersectionObserverIn?.observe(el);
             });
+            if (this.prop.states === 'inout') {
+                this._intersectionObserverOut = new IntersectionObserver(
+                    this._handleIntersectionObserverOut.bind(this),
+                    {
+                        root: this.intersectionRoot,
+                        threshold: 0,
+                        rootMargin: '0px 0px 0px 0px',
+                    },
+                );
+                this.elements.forEach((el) => {
+                    this._intersectionObserverOut?.observe(el);
+                });
+            }
         } else {
             // set scroll bounding events
             this._scrollEvent = onScroll({
@@ -228,17 +245,17 @@ export class ScrollView <
             this._scrollEvent.remove();
             this._scrollEvent = undefined;
         }
-        // destroy intersection observer
-        if (this._intersectionObserver) {
-            this._intersectionObserver.disconnect();
-            this._intersectionObserver = undefined;
-        }
+        // destroy intersection observers
+        this._intersectionObserverIn?.disconnect();
+        this._intersectionObserverIn = undefined;
+        this._intersectionObserverOut?.disconnect();
+        this._intersectionObserverOut = undefined;
     }
 
     /**
      * Event on IntersectionObserver
      */
-    protected _handleIntersectionObserver (
+    protected _handleIntersectionObserverIn (
         data: IntersectionObserverEntry[],
     ) {
         const parentBounding = this._firstStart ? this.scrollContainerBounding : false;
@@ -248,11 +265,13 @@ export class ScrollView <
             if (this._firstStart && !!parentBounding && entry.isIntersecting) {
                 delay = this._elementInViewportData(entry.target, parentBounding).delay;
             }
-            this._handleInOut(
-                entry.target,
-                entry.isIntersecting,
-                delay,
-            );
+            if (entry.isIntersecting) {
+                this._handleInOut(
+                    entry.target,
+                    entry.isIntersecting,
+                    delay,
+                );
+            }
         }
         this._processUnusedElements();
         // change states
@@ -262,6 +281,24 @@ export class ScrollView <
         }
     }
 
+    /**
+     * Event on IntersectionObserver
+     */
+    protected _handleIntersectionObserverOut (
+        data: IntersectionObserverEntry[],
+    ) {
+        for (let index = 0; index < data.length; index += 1) {
+            const entry = data[index];
+            if (!entry.isIntersecting) {
+                this._handleInOut(
+                    entry.target,
+                    entry.isIntersecting,
+                    0,
+                );
+            }
+        }
+    }
+
     /**
      * Event on Scroll
      */
@@ -287,7 +324,9 @@ export class ScrollView <
             const el = this.elements[index];
             const elData = this._elementInViewportData(el, scrollContainerBounding);
             const delay = elData.isIntersecting ? elData.delay : 0;
-            this._handleInOut(el, elData.isIntersecting, delay);
+            if (typeof elData.isIntersecting === 'boolean') {
+                this._handleInOut(el, elData.isIntersecting, delay);
+            }
         }
         this._processUnusedElements();
 
@@ -309,7 +348,7 @@ export class ScrollView <
         const bounding = el.getBoundingClientRect();
 
         // check if the element is intersecting
-        let isIntersecting = false;
+        let isIntersecting: undefined | boolean;
         if (
             bounding.top < parentBounding.top + parentBounding.height * threshold
             && bounding.left < parentBounding.left + parentBounding.width * threshold
@@ -324,6 +363,11 @@ export class ScrollView <
             } else {
                 isIntersecting = true;
             }
+        } else if (
+            bounding.top > parentBounding.top + parentBounding.height
+            || bounding.left > parentBounding.left + parentBounding.width
+        ) {
+            isIntersecting = false;
         }
 
         // calculate delay only if it is enabled & calculations
@@ -393,9 +437,8 @@ export class ScrollView <
         // remove unused elements
         const elementsToRemove = this._elements.filter((el) => el.scrollViewIn);
         elementsToRemove.forEach((el) => {
-            if (this._intersectionObserver) {
-                this._intersectionObserver.unobserve(el);
-            }
+            this._intersectionObserverIn?.unobserve(el);
+            this._intersectionObserverOut?.unobserve(el);
         });
         this._elements = this._elements.filter((el) => !el.scrollViewIn);
     }
@@ -410,9 +453,8 @@ export class ScrollView <
         const viewEl = element as NScrollView.El;
         viewEl.scrollViewIn = undefined;
         this._elements.push(element);
-        if (this._intersectionObserver) {
-            this._intersectionObserver.observe(element);
-        }
+        this._intersectionObserverIn?.observe(element);
+        this._intersectionObserverOut?.observe(element);
         if (this.prop.enabled) {
             this.seekBounding();
         }
@@ -432,9 +474,8 @@ export class ScrollView <
         const viewEl = element as NScrollView.El;
         viewEl.scrollViewIn = undefined;
         this._elements = this._elements.filter((el) => el !== element);
-        if (this._intersectionObserver) {
-            this._intersectionObserver.unobserve(element);
-        }
+        this._intersectionObserverIn?.unobserve(element);
+        this._intersectionObserverOut?.unobserve(element);
     }
 
     /**
@@ -442,9 +483,7 @@ export class ScrollView <
      */
     public removeElements () {
         this._elements.forEach((el) => {
-            if (this._intersectionObserver) {
-                this._intersectionObserver.unobserve(el);
-            }
+            this.removeElement(el);
         });
         this._elements = [];
     }