ScrolledUp Event issue

[poddarkhushbu07]

Expected Behaviour

scrolledUp should be triggered when scroll reaches the top of container.

Actual Behavior

I am using ngx-infinite-scroll for my chat module. I want an event when scrollbar is at top of the container. For this, scrolledUp output event is present, but in my case it is not getting triggered on currentScrollPosition:0. It is triggered after scrollbar is scrolled down a bit after reaching top position. i.e. currentScrollPosition:2 / currentScrollPosition:3.

infiniteScrollUpDistance:9.9
infiniteScrollThrottle: 1000
chatScrollDistance: 0

Version used: ^10.0.0 Browser Name and version: Chrome

[BarkhatovN]

I have same problem

[BarkhatovN]

There are 2 points We should look for

ngx-infinite-scroll uses throttleTime with default configuration (leading value emits) so if you scroll to top in throttled interval, it will emit only first value, that could not satisfy infiniteScrollUpDistance check

For example, infiniteScrollUpDistance=2(scrollTop should be less then 20% of scrollHeight to emit event), scrollTop= 1000 scrollHeight=2000, throttle interval=500ms. If you scroll to top in that interval, only scrollTop=999 might be handled, so needed event wouldn't be emitted

Also It has problem with browser behaviour. When scrollTop=0 and scrollHeight changes it doesn't change scrollTop, so we need scroll programmatically before add new elements (to scroll top 1 as Example) to let browser change scrollTop (navigate us to last shown element) when we add some elements in container

[orizens]

please try latest v13

[mi-wit]

I have the same issue (^13.0.2). It is also present in Chromium browser, but less often

My solution: Make the scrollable list always 'scrolled down a bit':

• add empty div with fixed height that is always on top of the scrolled list
• set the 'snap-start' CSS property to the scrolled list and 'scroll-snap-type: y' to infinite-scroll