diff --git a/src/components/InfiniteLoading.vue b/src/components/InfiniteLoading.vue index f5f3496..8b1605e 100644 --- a/src/components/InfiniteLoading.vue +++ b/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); diff --git a/test/unit/specs/InfiniteLoading.spec.js b/test/unit/specs/InfiniteLoading.spec.js index 869bf01..2e86b8e 100644 --- a/test/unit/specs/InfiniteLoading.spec.js +++ b/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: ` +
+
+
+
    +
  • +
+ + +
+
+
+ `, + methods: { + infiniteHandler: function infiniteHandler() { + expect(this.$refs.infiniteLoading.scrollParent).to.equal(this.$el); + done(); + }, + }, + })); + + vm.$mount('#app'); + }); });