Scroll not working properly

[gijo-varghese]

The scroll component (https://www.iviewui.com/components/scroll-en) isn't detecting the :on-reach-bottom properly. After loading everything, when I scroll down, nothing happens (I've reached the end). Only if I try to scroll again the event triggers. Same thing happens for "on-reach-top"

https://jsfiddle.net/06dz0jye/

[SergioCrisostomo]

@gijo-varghese happy hear you are using the scroll component!

The idea with :on-reach-bottom is not to fire immediately. The idea is to fire only when we scroll past the bottom, and it makes the stretch/rubber effect.

Do I understand correct that you would like the event to fire immediately when you reach the edge? I think we could add that, I see use case for that also.

[gijo-varghese]

@SergioCrisostomo Thanks for your quick response!

I'm building a chat application where admin can see the list of users on his website and chat with them. So it will have a list of users and messages. When admin scrolls down the user's list, the new users should be appended. Similarly for Messages, initially 10-15 messages will be displayed. When he scrolls up, rest will be added.

Right now I can't use iview's scroll for that. Because of that stretch/rubber effect. It may be good in mobile. But in desktop (I'm using the scroll wheel in mouse) its very hard to make it work. I had to scroll till the end, then scroll hard again to load it.

If you can fire an event immediately on reaching the edge, that would be really great! Maybe :on-reach-bottom-near or something like that

[SergioCrisostomo]

@gijo-varghese

just discussed with @icarusion and he agrees also we add props so we can trigger callback on "distance to edge".

Not sure what API should be so I write here and we can all think about it:

New prop naming suggestion/example:

a) :bottom-distance="20"
b) :bottom-threshold="20"
c) :threshold-bottom="20"
d) ?

This API would have bottom, top and edge.

[icarusion]

how about set [Number | Array], if just set Number like 20, both top and bottom can use, if set [20, 50], it can set top and bottom

[gijo-varghese]

@SergioCrisostomo distance to edge will be perfect! So even if user hasn't reached the exact 'bottom' I can trigger the event to load new list to append

[SergioCrisostomo]

Thanks for feedback!

We could add then: :distance-to-edge="<Number> | <[top-value, bottom-value]>"

@icarusion does that sound 👍 ?

[icarusion]

No problem 👍

[gijo-varghese]

@SergioCrisostomo @icarusion I still couldn't find it in the docs. Is it updated? https://www.iviewui.com/components/scroll-en

[icarusion]

Not demo, just a props desc
https://www.iviewui.com/components/scroll-en#API

[gijo-varghese]

Ok. Thanks