Item separation

[erikjons]

Hi, thanks for a great library. I have a question regarding item separation in a virtual scroll list. How would you solve that?

I've tested both using margin for spacing between items and having a separator element with a fixed height. Both solutions seems to work well while scrolling, but I've found some issues with updating the viewport.

When using margins for adding spaces between items the adapter.update and adapter.reload doesnt scroll correctly. You can see it here: https://stackblitz.com/edit/angular-ngx-ui-update-issue?file=src/app/sample-table/sample-table.component.html

Having a separator item with a fixed height, seems to solve the issue. Is that the prefered way?

[dhilt]

@erikjons Thanks for using vscroll/ngx-ui-scroll! The issue you are experiencing is about getting the DOM elements parameters. In current implementation, for example, the height param is getting through the getBoundingClientRect method (src link), which returns height + padding + border and ignores margin.

That's the short answer, but the long one is that you may try to re-implement DOM-routines logic when using vscroll core without ngx-ui-scroll wrapper. Here's the example of the approach:

https://stackblitz.com/edit/angular-13-ngx-ui-scroll-3-vscroll-1-5-0-integration?file=src%2Fngx-ui-scroll%2Fui-scroll.component.ts

The point we are discussing is the Workflow.Routines class definition (ui-scroll.component.ts) which has the onScroll demo method. To play with height parameter you may add getElementParams methods with your own implementation. Full description of the Routines class can be found here. Typings is not perfect since it is a new core feature, but you may override every DOM-related piece of logic without changing the core. If the change results in better experience/performance/stability, it can be integrated into the ngx-ui-scroll library.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed within seven days if no further activity occurs. If it needs to remain open, add the "permanent" label.

[stale[bot]]

This issue has been automatically closed because it was stale.