Manually set the scroll parent element

[joelcuevas]

For vue-infinite-loading v1.3.0.

Currently I'm using perfect-scrollbar. It sets the overflow-y property to "hidden" on the scrollable container, causing that vue-infinite-loading doesn't find the correct parent (which is expected to have overflow-y "scroll" or "auto"). If I set the scroll parent to the correct one (hardcoding for debugging purposes), both libraries get along pretty fine.

@PeachScript do you think that passing the scroll parent on a property could be a good idea? Another libraries are doing this, but I like yours the most, so I gladfully could do a PR.

Do you have a different suggestion?

Thanks!

[PeachScript]

Hi @joelcuevas @cristianda , thanks for your suggestion, let's discuss here.

Through your description, I also think support customize scroll container is very useful and important, but the key point is, which is the elegant way?

In order to make it easier to use, I recommend add a customize attribute to identify the real scroll parent rather than passing scroll parent as a property, because we should to avoid handling DOM directly, template maybe like this:

<div class="customize-scroll-container" some-special-attribute>
  ...
  <infinite-loading></infinite-loading>
</div>

And this plugin will find the element which has overflow-y: auto|scroll CSS style or some-special-attribute attribute as a scroll parent.

How do you think about it?

[cristiandan]

I have the same problem, please let me know if you found a workaround.

[PeachScript]

@cristiandan maybe you missed my previous comment? We commented this issue almost at the same time. 🤦‍♂️

[cristiandan]

Sorry, I think we wrote at the same time. Thanks!
The some-special-attribute way looks fine for me

[joelcuevas]

The special attribute sounds nicer to me too!

Do you need some help with this?

[PeachScript]

Of course! We need to name the special attribute, such as infinite-scroll-parent, infinite-wrapper or others, do you have any ideas?

[joelcuevas]

I think infinite-wrapper sounds good!

[PeachScript]

No problem, it's called infinite-wrapper. I have added the special attribute but not yet released a new version, could you help me to test it with the rawgit asset?

[kronicker]

Are you planning to release 2.1.0 soon? I'm anxious to start using this new feature on a project 😄

[PeachScript]

@kronicker of course! But as you can see, I have not finished testing yet, I will as soon as possible...

[PeachScript]

Hi @joelcuevas, @cristiandan and @kronicker , I have already released a new version v2.1.0 to support custom scroll parent with infinite-wrapper attribute, tested can be used with perfect-scroll, you can try it now.

But it cannot work directly with iScroll, because the iScroll plugin will not fire the scroll event after touch, I will write a workaround into official document. If you have any good idea to solve it, please tell me, thank you very much!