InfiniteScroll: Skip trigger event on invisible element (ElemeFE#17553)

* InfiniteScroll: Do not trigger event on invisible element * InfiniteScroll: Do not trigger event on invisible element2
lzq4047 · May 22, 2020 · fd5f414 · fd5f414
1 parent 66f89f1
commit fd5f414
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 0 deletions.
diff --git a/packages/infinite-scroll/src/main.js b/packages/infinite-scroll/src/main.js
@@ -92,6 +92,9 @@ const handleScroll = function(cb) {
 
   if (disabled) return;
 
+  const containerInfo = container.getBoundingClientRect();
+  if (!containerInfo.width && !containerInfo.height) return;
+
   let shouldTrigger = false;
 
   if (container === el) {

diff --git a/test/unit/specs/infiniteScroll.spec.js b/test/unit/specs/infiniteScroll.spec.js
@@ -28,5 +28,31 @@ describe('InfiniteScroll', () => {
     await wait();
     expect(vm.$el.innerText.indexOf('2') > -1).to.be.true;
   });
+
+  it('invisible element not trigger', async() => {
+    vm = createVue({
+      template: `
+      <div v-show="false">
+        <ul ref="scrollTarget" v-infinite-scroll="load" style="height: 300px;overflow: auto;">
+          <li v-for="i in count" style="display: flex;height: 50px;">{{ i }}</li>
+        </ul>
+      </div>
+      `,
+      data() {
+        return {
+          count: 0
+        };
+      },
+      methods: {
+        load() {
+          this.count += 2;
+        }
+      }
+    }, true);
+    vm.$refs.scrollTarget.scrollTop = 2000;
+    await wait();
+    expect(vm.$el.innerText.indexOf('2') > -1).to.be.false;
+  });
+
 });