1

I am using react-beautiful-dnd for my project where I have multiple columns and items to be dragged along those columns. Drag&Drop feature is working well as expected. I also have other elements in the page such as a Sidebar or header, so, in the case of having too many columns, I want the scroll operation to be performed only inside Drag&Drop container. However, wrapping that with overflow-x: scroll breaks the scroll behavior while dragging a task from the first column to the last.

<h1>My Page</h1>
<div className="columns" style={{ overflowX: 'scroll' }}> // overflowX breaks scrolling while dragging
    <DragDropContext onDragEnd={ result => onDragEnd(result, columns, setColumns) }>
        ...
    </DragDropContext>
</div>

Can anyone help me with this?

atunays
  • 23
  • 2
  • Possibly related to a long-standing bug for this library: https://github.com/atlassian/react-beautiful-dnd/issues/131. It has yet to be solved, and I wouldn't hold my breath on this one. – apgsn May 19 '22 at 13:11

0 Answers0