Skip to content

Manually set the scroll parent element #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
joelcuevas opened this issue Apr 20, 2017 · 14 comments
Closed

Manually set the scroll parent element #44

joelcuevas opened this issue Apr 20, 2017 · 14 comments

Comments

@joelcuevas
Copy link

joelcuevas commented Apr 20, 2017

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
Copy link
Owner

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
Copy link

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

@PeachScript
Copy link
Owner

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

@cristiandan
Copy link

cristiandan commented Apr 21, 2017

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

@joelcuevas
Copy link
Author

The special attribute sounds nicer to me too!

Do you need some help with this?

@PeachScript
Copy link
Owner

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

@joelcuevas
Copy link
Author

I think infinite-wrapper sounds good!

@PeachScript
Copy link
Owner

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
Copy link

kronicker commented May 12, 2017

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

@PeachScript
Copy link
Owner

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

@PeachScript
Copy link
Owner

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
Copy link

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

@PeachScript
Copy link
Owner

You're welcome! 😄

@cristiandan
Copy link

That's awesome, thanks a lot @PeachScript !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants