fix(scroll): 🐛Fix scroll not triggered

vivaxy · May 29, 2019 · c20e218 · c20e218
1 parent ab84289
commit c20e218
Show file tree

Hide file tree

Showing 7 changed files with 140 additions and 55 deletions.
diff --git a/bundle/impression.rollup.js b/bundle/impression.rollup.js
@@ -1,4 +1,4 @@
-/* @vivaxy/impression@v2.0.0 by vivaxy */
+/* @vivaxy/impression@v2.1.0 by vivaxy */
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
 	typeof define === 'function' && define.amd ? define(factory) :
@@ -595,15 +595,15 @@ var scrollEvents = (function (container) {
                 return callback(SCROLL);
             };
             presets(container);
-            container.addEventListener(SCROLL$1, _callback);
+            container.addEventListener(SCROLL$1, _callback, true);
 
             return true;
         }
     };
 
     var off = function off() {
         if (attached) {
-            container.removeEventListener(SCROLL$1, _callback);
+            container.removeEventListener(SCROLL$1, _callback, true);
             attached = false;
             return true;
         } else {

diff --git a/bundle/impression.webpack.js b/bundle/impression.webpack.js
@@ -1,4 +1,4 @@
-/*! @vivaxy/impression@v2.0.0 by vivaxy */
+/*! @vivaxy/impression@v2.1.0 by vivaxy */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory();
@@ -1243,15 +1243,15 @@ exports.default = function (container) {
                 return callback(observers.SCROLL);
             };
             (0, _presets2.default)(container);
-            container.addEventListener(SCROLL, _callback);
+            container.addEventListener(SCROLL, _callback, true);
 
             return true;
         }
     };
 
     var off = function off() {
         if (attached) {
-            container.removeEventListener(SCROLL, _callback);
+            container.removeEventListener(SCROLL, _callback, true);
             attached = false;
             return true;
         } else {

diff --git a/dist/observers/scroll.js b/dist/observers/scroll.js
@@ -36,15 +36,15 @@ exports.default = function (container) {
                 return callback(observers.SCROLL);
             };
             (0, _presets2.default)(container);
-            container.addEventListener(SCROLL, _callback);
+            container.addEventListener(SCROLL, _callback, true);
 
             return true;
         }
     };
 
     var off = function off() {
         if (attached) {
-            container.removeEventListener(SCROLL, _callback);
+            container.removeEventListener(SCROLL, _callback, true);
             attached = false;
             return true;
         } else {

diff --git a/source/observers/scroll.js b/source/observers/scroll.js
@@ -21,15 +21,16 @@ export default (container) => {
                 return callback(observers.SCROLL);
             };
             presets(container);
-            container.addEventListener(SCROLL, _callback);
+            // `scroll` event not propagation when it happens in an element. Bind event at capture resolve this problem.
+            container.addEventListener(SCROLL, _callback, true);
 
             return true;
         }
     };
 
     const off = () => {
         if (attached) {
-            container.removeEventListener(SCROLL, _callback);
+            container.removeEventListener(SCROLL, _callback, true);
             attached = false;
             return true;
         } else {

diff --git a/test/manual-test-scroll.html b/test/manual-test-scroll.html
@@ -0,0 +1,75 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <title>impression</title>
+    <link rel="stylesheet" href="manual-test.css">
+    <style>
+        .scroll-container {
+            overflow-x: scroll;
+            width: 100%;
+        }
+
+        .container {
+            width: 1000px;
+            font-size: 0;
+        }
+
+        .element {
+            display: inline-block;
+        }
+    </style>
+</head>
+<body>
+<div class="scroll-container">
+    <div class="container">
+        <div class="element" data-impression-unique-id="1"></div>
+        <div class="element" data-impression-unique-id="2"></div>
+        <div class="element" data-impression-unique-id="3"></div>
+        <div class="element" data-impression-unique-id="4"></div>
+        <div class="element" data-impression-unique-id="5"></div>
+        <div class="element" data-impression-unique-id="6"></div>
+        <div class="element" data-impression-unique-id="7"></div>
+        <div class="element" data-impression-unique-id="8"></div>
+        <div class="element" data-impression-unique-id="9"></div>
+        <div class="element" data-impression-unique-id="10"></div>
+    </div>
+</div>
+<script src="../bundle/impression.rollup.js"></script>
+<script>
+    function init() {
+        const SELECTOR_ALL = '[data-impression-unique-id]';
+        const impression = new Impression({
+            tolerance: 0,
+            debounce: 100,
+        });
+        let flagBegin = 0;
+        const callbackBegin = (el, info) => {
+            flagBegin++;
+            console.log('begin', flagBegin, el, info);
+        };
+        let flagEnd = 0;
+        const callbackEnd = (el, info) => {
+            flagEnd++;
+            console.log('end', flagEnd, el, info);
+        };
+
+        impression.on('begin', SELECTOR_ALL, callbackBegin);
+        impression.on('end', SELECTOR_ALL, callbackEnd);
+
+        impression.scan();
+
+        return impression;
+    }
+
+    if (document.readyState === 'complete') {
+        window.impression = init()
+    } else {
+        window.addEventListener('load', () => {
+            window.impression = init();
+        });
+    }
+</script>
+</body>
+</html>
diff --git a/test/manual-test.css b/test/manual-test.css
@@ -0,0 +1,42 @@
+/**
+ * @since 2019-05-29 20:58
+ * @author vivaxy
+ */
+
+html {
+    width: 100%;
+}
+
+body {
+    margin: 0;
+    width: 100%;
+}
+
+.element {
+    width: 100px;
+    height: 100px;
+}
+
+.element:nth-child(6n) {
+    background-color: #f99;
+}
+
+.element:nth-child(6n+1) {
+    background-color: #9f9;
+}
+
+.element:nth-child(6n+2) {
+    background-color: #99f;
+}
+
+.element:nth-child(6n+3) {
+    background-color: #ff9;
+}
+
+.element:nth-child(6n+4) {
+    background-color: #f9f;
+}
+
+.element:nth-child(6n+5) {
+    background-color: #9ff;
+}
diff --git a/test/manual-test.html b/test/manual-test.html
@@ -1,55 +1,32 @@
 <!DOCTYPE HTML>
-<html>
+<html lang="en">
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
     <title>impression</title>
-    <style>
-        body {
-            margin: 0;
-            position: fixed;
-            width: 200px;
-            height: 200px;
-            overflow: auto;
-        }
-
-        .element {
-            width: 100px;
-            height: 100px;
-        }
-
-        [data-impression-unique-id="1"] {
-            background-color: #f00;
-        }
-
-        [data-impression-unique-id="2"] {
-            background-color: #0ff;
-        }
-
-        [data-impression-unique-id="3"] {
-            background-color: #f0f;
-        }
-
-        [data-impression-unique-id="4"] {
-            background-color: #00f;
-        }
-    </style>
+    <link rel="stylesheet" href="manual-test.css">
 </head>
 <body>
 <div class="container">
     <div class="element" data-impression-unique-id="1"></div>
     <div class="element" data-impression-unique-id="2"></div>
     <div class="element" data-impression-unique-id="3"></div>
     <div class="element" data-impression-unique-id="4"></div>
+    <div class="element" data-impression-unique-id="5"></div>
+    <div class="element" data-impression-unique-id="6"></div>
+    <div class="element" data-impression-unique-id="7"></div>
+    <div class="element" data-impression-unique-id="8"></div>
+    <div class="element" data-impression-unique-id="9"></div>
+    <div class="element" data-impression-unique-id="10"></div>
+    <div class="element" data-impression-unique-id="11"></div>
+    <div class="element" data-impression-unique-id="12"></div>
 </div>
 
 <script src="../bundle/impression.rollup.js"></script>
 <script>
     function init() {
         const SELECTOR_ALL = '[data-impression-unique-id]';
-        const SELECTOR_4 = '[data-impression-unique-id="4"]';
         const impression = new Impression({
-            container: document.body,
             tolerance: 0,
             debounce: 100,
         });
@@ -64,21 +41,11 @@
             console.log('end', flagEnd, el, info);
         };
 
-        const element4 = document.querySelector(SELECTOR_4);
-        document.body.style.height = '400px';
-        const div = document.createElement('div');
-        const container = document.querySelector('.container');
-        div.setAttribute('data-impression-unique-id', '4');
-        div.setAttribute('class', 'element');
-        container.appendChild(div);
-
         impression.on('begin', SELECTOR_ALL, callbackBegin);
         impression.on('end', SELECTOR_ALL, callbackEnd);
 
-        setTimeout(() => {
-            document.body.style.height = '100px';
-            container.removeChild(element4);
-        }, 2000);
+        impression.scan();
+
         return impression;
     }