ngx-ui-scroll: Wrong scroll position on start when an items height > viewport and inverse = true

There seem to be an issue with wrong scroll position for ‘startIndex’ setting when an item heigh > viewport height.

A demo https://stackblitz.com/edit/angular-ngx-ui-scroll-1-3-0-tbjtc1?file=src%2Fapp%2Fapp.component.css

If we use

.item {
  height: 50px; 
}

then all is ok

but if we set something bigger than a viewport, e.g.

.item {
  height: 350px; 
}

then there is an issue with proper scroll positioning.

There can be a case in chat apps, where a message can contain lots of text and the mobile device screen is not so big, so the issue can occur

Please let me know if anything else is needed too trace it

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 17 (7 by maintainers)

Most upvoted comments

@DaveLomber You know, the inverse setting is pretty dumb. Per inverse demo description:

When inverse setting is set to true, the backward padding element will have a priority over the forward one, and it will be stretched if there are not enough items in the viewport.

In your case it just does not have an impact on the result due to the fact that the item is big enough and there is no need to stretch paddings. In other words, if the visible part of the viewport is filled, the inverse setting will not affect the view.

Instead I would use a combination of reverse setting (when cumulative height of initial items is less than the height of the viewport) and autoscroll feature (when the item you want to be shown first is bigger that the viewport). For the second part I suggest following approach:

const { isLoading$, firstVisible$ } = this.datasource.adapter;
zip(isLoading$, firstVisible$)
.pipe(
  filter(([isLoading]) => !isLoading),
  take(1)
)
.subscribe(
  (([isLoading, item]) => {
    const viewportElement = document.querySelector('.viewport');
    const diff = item.element.clientHeight - viewportElement.clientHeight;
    // adjust scroll position only if the start item is bigger than the viewport
    if (diff > 0) {
      console.log('aligned by', diff)
      viewportElement.scrollTop += diff;
    }
  })
);

The demo is here – https://stackblitz.com/edit/angular-ngx-ui-scroll-1-4-1-scroll-to-bottom-of-item. Try to switch COUNT to 1…

dhilt on Feb 22, 2020

@dhilt could you please check this demo https://stackblitz.com/edit/angular-ngx-ui-scroll-1-3-0-rnsvxm?file=src/app/app.component.ts

with your math provided it’s better, but I still randomly can face the issue in my app, and now I reproduced it in a demo

One element should be bigger than the rest - and then the issue occurs

DaveLomber on Feb 26, 2020