Auto scrolling doesn't work when dragging individual list items horizontally between lists - as long as every list and the board both have their own scroll container.

[markusenglund]

Bug or feature request?

Bug

Expected behavior

Dragging a list item (that is part of a vertical list) horizontally should cause the container to scroll in that direction.

Actual behavior

It doesn't, as long as:
(1) The board is inside its own scroll container (meaning a div, not the window).
(2) The lists are inside their own scroll containers.

Otherwise, autoscrolling works just as expected, including if either one of the two conditions apply.

Steps to reproduce

I've changed these two files on my fork to illustrate the problem (see the gif below). Clone the branch on my fork or just copy these files and look at the board examples in storybook.

Browser version

Google Chrome 65.0.3325.88 beta,
Mozilla Firefox 58.0.2

Demo

Autoscrolling works great otherwise, but this tiny bug is preventing my project from working as it should. I'll try to look into the source code later to see if I can fix it.

[markusenglund]

Looks like the amount of code relating to autoscrolling is huge. I can't fix this myself.

[poryzhao]

I encountered the same problem, It seems that when the vertical list is set an 'overflow' attribute, the problem will come.

I can't quite understand these decriptions as well (https://github.com/atlassian/react-beautiful-dnd#scroll-containers)

[markusenglund]

That description is a bit hard to understand, but it sounds to me like this use case is not supported. @alexreardon, do you have any thoughts on this?

[alexreardon]

Correct - it is not supported for now. I can improve the clarity of that section.

Supported:
A Droppable that is a scroll container
A Droppable that is not a scroll container but sits inside of one scroll container

Your usage falls outside of that: it contains nested scroll containers

This is the issue related to this functionality: #131

[bmueller-sykes]

To jump in here...I'm using this library to build a kanban board, where both the kanban columns and the cards within each column are draggable.

If I drag to reorder my columns, autoscrolling works (e.g. horizontal overflow scrolling). Also, if I drag a card from one column to another, horizontal autoscrolling works.

However, if I drag to reorder a card within a single column, that column will not autoscroll (e.g. short column, lots of cards). Basically, exactly the behavior at the top of this issue. But your release notes for 5.0.0 has a screen grab of exactly this behavior (e.g. screen grab shows columns being reordered as well as cards within each column reordered), and auto-scrolling working both horizontally and vertically. Specifically, the screen grab with the title "Mouse and Touch".

So I must be missing something here, right?

(This library is great, by the way)

[renhao233]

I fixed this to comment the inner Droppable css style overflow-y: scroll;, it just worked.

[gregoryforel]

@1renhaO Would you have a working example, or could you please check mine? I can't figure the solution and I've been 2 days working on it.

[renhao233]

this may help you
https://react-beautiful-dnd.netlify.com/?path=/story/board--simple (resize the browser until you can find the horizontal scroller, and drag the card, you can find that the the window will auto scroll horizontally)
this is the code
https://github.com/atlassian/react-beautiful-dnd/tree/master/stories/src/board

[renhao233]

@gregoryforel

[renhao233]

comment the overflow style, it can scroll, may the style caused it can't be auto scroll horizontal

[alexcyfong]

@1renhaO for your example raised
https://react-beautiful-dnd.netlify.app/iframe.html?id=board--simple

The scroll works when it is on desktop mode but when you switch the browser to mobile or small screen, it does not work. Does it support mobile size browser?

[yoryi]

Dont we have solution on this? I am building something like trello board, and facing the auto scroll problem for dnding draggable items between columns, and getting warning unsupported nested scroll container detected,
Each vertical lists have its own scrollbar and entire board has also horizontal scrollbar, I can confirm trello works perfect for nested scrollbar for this feature.

@alexreardon dont we have solution for making auto scrolling like trello using this library?

[sbacorp]

@yoryi Did you find the answer?