Manually set the scroll parent element

PeachScript / vue-infinite-loading

An infinite scroll plugin for Vue.js.

https://peachscript.github.io/vue-infinite-loading/

MIT License

2.66k stars 366 forks source link

Manually set the scroll parent element #44

Closed joelcuevas closed 7 years ago

joelcuevas commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

PeachScript commented 7 years ago

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

cristiandan commented 7 years ago

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

joelcuevas commented 7 years ago

The special attribute sounds nicer to me too!

Do you need some help with this?

PeachScript commented 7 years ago

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

joelcuevas commented 7 years ago

I think infinite-wrapper sounds good!

PeachScript commented 7 years ago

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 commented 7 years ago

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

PeachScript commented 7 years ago

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

PeachScript commented 7 years ago

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!

kronicker commented 7 years ago

@PeachScript Already tested it with perfect-scrollbar, works like a charm. Thanks for your work!!

PeachScript commented 7 years ago

You're welcome! 😄

cristiandan commented 7 years ago

That's awesome, thanks a lot @PeachScript !