MoveRight function incorrectly calculating the full width of container element

[nathanryan3495]

• I'm submitting a ...

  • [x] bug report
  • [ ] feature request
  • [ ] support request => Please do not submit support request here, see note at the top of this template.

• Do you want to request a feature or report a bug? Bug

• What is the current behavior?

As you can see in the screenshot above I have 2 buttons (they call the moveLeft() and moveRight() functions) and a drag-scroll wrapper around my mat-chip-list component. I have the drag-scroll disabled so the only way to move it is via the buttons.

When using the moveRight() function it gets to a point where drag scroll stops and think it is at the end causing the final chip to be cut off (see screenshot below for the overflow).

The only way around it currently for my use case is to re-enable the drag scroll x so atleast if the user drags it manually they will be able to reach the end however if they use the left/right button the final chip will still be cut off.

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem you can use the demo site as an example or via https://plnkr.co

Create a component that has two buttons (forward and back) and then a mat-chip-list with multiple mat-chips inside with the drag-scroll component wrapped around it. Disabled the x and y scroll for the container and only control it via the buttons. Keeping clicking the right button and you will reach the 'end' of the scroll with the final chip partially cut off.

• What is the expected behavior?

What I believe is happening is that when the scroll gets near the end if the remaining amount to scroll forward is less than a full scroll ammount that is usually exectued when calling 'moveRight()' it falls over. So if that is the case I would expect that if on the final click the remaining amount of excess to scroll is less than what is usually exectued just scroll to the end.

• What is the motivation / use case for changing the behavior? Fixing this would improve usability of the library when trying to externally control the drag scroll component. The feature of dragging the element with your mouse works perfectly but in my case, I want the added feature to be able to control the scroll with buttons.

• Please tell us about your environment:

  • Version: 13.0.0-beta.1
  • Browser: Chrome version - 101.0.4951.41

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)