How to reinitialise the autoScroll when a new element is added to the group?

[sandeepsuvit]

How do we reinitialise the autoScroll for a new column that is dynamically added? For example, consider we have Trello like board where there are two columns like "Todo" and "In progress". Consider we have already initialised the autoScroll for these two columns on load to inherit the autoscrolling property when we drag the cards around. Now i am adding a new column named "Done" dynamically without any page refresh. How do i reinitialise the autoScroll function on the 3rd column in this case. I have tried making a function like shown below whenever i add new columns and called it when i create new columns.

initScroll() { autoScroll([document.querySelector('.list-container')], { margin: 20, maxSpeed: 5, scrollWhenOutside: true, autoScroll: function(){ //Only scroll when the pointer is down, and there is a child being dragged. return this.down; } }); }

But this doesn't work and i see that dragging cards around after calling this function multiple times makes the app so slow, seems like some kind of recursive function calls is happening internally if the function initScroll() is made more than once without a page referesh. I would like to understand a workaround for this. Is this a bug?

[sandeepsuvit]

Added a temporary fix to this issue in my example like so. As per the above details i was calling initScroll whenever a new column was added. Now instead of calling initScroll method i created another method `resetScroll() {

// Remove all old column references
[...Array.from(this.elRef.nativeElement.querySelectorAll('.columns'))].forEach(el => this.scrollElements.remove(el));

// Add new column references
[...Array.from(this.elRef.nativeElement.querySelectorAll('.columns'))].forEach(el => this.scrollElements.add(el));

}` This works in my case without any issues. Call this function whenever you want to reset the scroll conditions. Dont know if this is the wright thing to do. Please do comment.

Also, make sure that to unsubscribe the scroller when the component on which the scroller is added is destroyed ngOnDestroy() { // Required to remove any autoscroll items else will cause frame drops while dragging this.scrollElements.destroy(true); }