feat: the forceUseInfiniteWrapper prop support css selector (#187)

* feat: the forceUseInfiniteWrapper could be a css selector

* chore: forget to remove only flag

Author: snowyu

src/components/InfiniteLoading.vue

@@ -295,12 +295,18 @@ export default {
     getScrollParent(elm = this.$el) {
       let result;
 
-      if (elm.tagName === 'BODY') {
-        result = window;
-      } else if (!this.forceUseInfiniteWrapper && ['scroll', 'auto'].indexOf(getComputedStyle(elm).overflowY) > -1) {
-        result = elm;
-      } else if (elm.hasAttribute('infinite-wrapper') || elm.hasAttribute('data-infinite-wrapper')) {
-        result = elm;
+      if (typeof this.forceUseInfiniteWrapper === 'string') {
+        result = elm.querySelector(this.forceUseInfiniteWrapper);
+      }
+
+      if (!result) {
+        if (elm.tagName === 'BODY') {
+          result = window;
+        } else if (!this.forceUseInfiniteWrapper && ['scroll', 'auto'].indexOf(getComputedStyle(elm).overflowY) > -1) {
+          result = elm;
+        } else if (elm.hasAttribute('infinite-wrapper') || elm.hasAttribute('data-infinite-wrapper')) {
+          result = elm;
+        }
       }
 
       return result || this.getScrollParent(elm.parentNode);

test/unit/specs/InfiniteLoading.spec.js

@@ -566,4 +566,35 @@ describe('vue-infinite-loading', () => {
 
     vm.$mount('#app');
   });
+
+  it('should find my forcible element as scroll wrapper when using `force-use-infinite-wrapper` as seletor', (done) => {
+    vm = new Vue(Object.assign({}, basicConfig, {
+      template: `
+        <div class="scroll">
+          <div style="overflow: auto;">
+            <div style="overflow: auto;">
+              <ul>
+                <li v-for="item in list" v-text="item"></li>
+              </ul>
+              <infinite-loading
+                :direction="direction"
+                @infinite="infiniteHandler"
+                ref="infiniteLoading"
+                force-use-infinite-wrapper=".scroll"
+                >
+              </infinite-loading>
+            </div>
+          </div>
+        </div>
+      `,
+      methods: {
+        infiniteHandler: function infiniteHandler() {
+          expect(this.$refs.infiniteLoading.scrollParent).to.equal(this.$el);
+          done();
+        },
+      },
+    }));
+
+    vm.$mount('#app');
+  });
 });