scroll when dragging

[KumailHussain]

If i have a large number of items the container can't scroll at own

[MNorgren]

Anyone have suggestions on how to do this? This would be very beneficial to me as well

[jarhys]

Set a timer function when dragging, check if the dragged item is outside the container, and scroll the container.

[jzahka]

You can try https://github.com/hollowdoor/dom_autoscroller Worked for me for this exact issue.

[Supamiu]

@jzahka Can you please provide a code example? Or did it just work out of the box?

[jzahka]

I more or less copied the example in the repo https://github.com/hollowdoor/dom_autoscroller#usage

import autoScroll from 'dom-autoscroller';
// ...

constructor(private element: ElementRef) {}
// ...
ngAfterViewInit() {
  autoScroll([
    this.element.nativeElement // element needs to be scrollable
  ], {
    margin: 50,
    maxSpeed: 20,
    autoScroll: function() {
      // only scroll when mouse is down
      // `this` does not refer to component here
      return this.down;
    }
  });
}

[GitHubish]

Do you have performance problems at home with ngx-dnd and dom_autoscroll? I made a kind of board like Trello (much lighter in terms of features), I added dom_autoscroll to scroll vertically and horizontally but the interface is very jerky. Do you have the same problem?

[jzahka]

@GitHubish I haven't had the jerky interface issue you describe.

[GitHubish]

I did a test project, the problem arises as soon as there are a certain number of elements displayed. In my case with an interface without CSS, without any other complexity / heaviness caused by other components, animations jerk with 250 elements.

[hijoncon]

@jzahka how do you destroy when leaving the component?

[marcio199226]

@jzahka @GitHubish You should initialize autoScroll inside runOutsideAngular for better performance so all events catched up by listeners registered in autoScroll will not cause change detection to run

[Kartheek2016]

Hey @hijoncon Did you find a solution or work around on how to destroy when leaving the component!?

[jzahka]

I believe you can use destroy() on the instance returned by the autoScroll() function. https://github.com/hollowdoor/dom_autoscroller#destroyforcecleananimation