Inconsistencies with cdkDropListAutoScroll

[Ploppy3]

Reproduction

On this repro you can see that's it's near impossible to drag the last element to the top.
I was not able to reproduce my problem though, which is the opposite, I can drag from the bottom to the top but can't drag from top to bottom at all.

Hardly working towards the top (removing border-bottom on element seems to fix the problem)
https://stackblitz.com/edit/angular-ambqxc?file=app/cdk-drag-drop-sorting-example.css

Not working at all towards top
https://stackblitz.com/edit/angular-ambqxc-xlst4y?file=app/cdk-drag-drop-sorting-example.css

Not working at all towards top, hardly working towards bottom
(withing an absolutely positioned body)
https://stackblitz.com/edit/angular-ambqxc-ehsbz5?file=styles.css

Hardly working in both directions
(withing an absolutely positioned body ; filling height of a flex container)
https://stackblitz.com/edit/angular-ambqxc-bmdjkk?file=styles.css

Expected Behavior

Auto-scroll should work consistently in every directions.

Actual Behavior

Auto-scroll works sometimes only.

Environment

• Angular: 8.2.0-rc.0
• CDK/Material: 8.1.2
• Browser(s): Chrome
• Operating System: Windows

[crisbeto]

I wasn't really able to reproduce it in the demos, but what I think might be going on is that the scrolling regions overlap. The way it's set up at the moment is that it looks for whether your pointer is in the top X% of either the list or the window. If those two regions overlap it just takes one. By saying "not being able to drag", do you mean that the view isn't scrolling or the element isn't being dragged at all?

[Ploppy3]

I mean that the view is not scrolling when dragging an element to the top/bottom of a vertical list, sorry for not being clear enough.

[crisbeto]

That sounds like the scroll regions are overlapping. You should be able to verify if that's the case by pushing the drop list somewhere further down the page (e.g. in the middle) and seeing if the auto scroll starts working.

[Ploppy3]

After a small test, I think it is what you are pointing out, let me explain:
In order to have the most freedom with router animations, my components are in position: fixed and fill the height and width of the <mat-drawer-content> component.
In the following picture, you have:

• Left: nav-list
• Top right: toolbar
• Bottom-right: d&d list

The d&d list fills the height available from the and therefore is also constantly at the bottom of the window. The auto-scroll only work at the top of the list.

What I tested which seems to confirm your point: if I remove the toolbar, the list is now at the top of the window and auto-scroll stopped working.

[andrewseguin]

@crisbeto is this an issue we need to resolve, or is it just an issue with having overlapping regions

[crisbeto]

It's definitely a valid issue that should be resolved.