React Dnd out of position after scroll

Perhaps it's too late for the answer, but for someone, it can be helpful.If you look closer, you'll see the offset when you scroll and this is the reason for broken styles.For a solution, you should think about the scroll container, if you append scroll to HTMLElement, not Window, you need to check this example.This issue related to react-beautiful-dnd itself and the updated version will fix that.

I have run in to the same problem. The issue for me was that droppable(list) was inside, for example, main container which was scrollable (i.e. overflow: scroll).

I resolved the issue by converting the droppable into scrollable instead of main container

Example that had an issue

.main {  background: #eee;  padding: 3rem;  height: 200px;  overflow-y: scroll;}.droppable {  padding: 1rem;  background: #aaa;}.draggable {  margin: 0.5rem 0;  padding: 1rem;  background: #ccc;}

<div class="main">  <div class="droppable">    <div class="draggable">        <span class="text"> item</span>    </div>      <div class="draggable">          <span class="text"> item</span>    </div>      <div class="draggable">        <span class="text"> item</span>    </div>  </div></div>