feat: add prop to forcefully use body wrapper

[kyosifov]

Add a prop which enables the use of HTMLBody Element as a wrapper.

In one of my projects in order to disable default scroll from Safari, I had to use overflow: scroll for the body and when I want to use it as an infinite loader a check is made when using "body" and it fallbacks to Window.

This pull request adds a prop which enables the usage of "body".

[codecov[bot]]

Codecov Report

Merging #268 into master will not change coverage. The diff coverage is 100%.

@@          Coverage Diff          @@
##           master   #268   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files           5      5           
  Lines         174    176    +2     
  Branches       32     33    +1     
=====================================
+ Hits          174    176    +2

Impacted Files	Coverage Δ
src/components/InfiniteLoading.vue	100% <100%> (ø)	:arrow_up:

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 3792d95...9607128. Read the comment docs.

[PeachScript]

Could it not be implemented that set forceUseInfiniteWrapper as body?

[kyosifov]

Could you please elaborate? Maybe I have not been clear.

in this line of code -- https://github.com/PeachScript/vue-infinite-loading/blob/master/src/components/InfiniteLoading.vue#L323

You check if the element is of tag "body" and if that is the case you default to the window. That is a great feature if you use the default scroll, but if you set the overflow: auto to both HTML, body the infinite wrapper breaks as the window's scrollTop no longer updates.

And so I implemented a new prop to force it, so we do not use the body if we pass the element.

[PeachScript]

You could check out this line: https://github.com/PeachScript/vue-infinite-loading/blob/master/src/components/InfiniteLoading.vue#L319

InfiniteLoading will querySelector and use the target element as scroll parent if we pass forceUseInfiniteWrapper property.

[JesusRugama]

InfiniteLoading will querySelector and use the target element as scroll parent if we pass forceUseInfiniteWrapper property.

InfiniteLoading will querySelector inside the components element, then its parent, then the parent of its parent, until it reaches body. It will never do document.querySelector('body') and $body.querySelector('body') wont find the body either, so getScrollParent will never return the body.

[PeachScript]

@JesusRugama got it, I wrote querySelector from component element rather than window, I will fix it in the next version, thank you very much ❤️

[PeachScript]

v2.4.5 fixed querySelector bug, this PR will be closed.

[JesusRugama]

@PeachScript thanks for your work! its a great tool :)