search

atlassian / react-beautiful-dnd

Beautiful and accessible drag and drop for lists with React
https://react-beautiful-dnd.netlify.app
Other
33.37k stars 2.56k forks source link

Auto scroll issue with sticky positioning and full viewport height container #866

Closed skflowne closed 5 years ago

skflowne commented 6 years ago

Bug

I have a sidebar in position sticky, inside is a Droppable and inside some Draggables. This is the CSS of the sticky container :

  display: flex;
  flex-direction: column;
  position: sticky;
  top: 70px;
  right: 0;
  height: calc(100vh - 70px);
  max-width: 90px;

In there I have a Droppable with overflow: auto and a max-height: 84vh And in there some Draggables that can be reorganised by drag-n-drop.

Expected behavior

When I move a Draggable near the edge of the Droppable container, it would automatically scroll the Droppable container with overflow: auto

Actual behavior

When I move a Draggable the window starts scrolling, the Droppable doesn't scroll at all, even when I reach the end of the window scroll, I still can't make my container scroll.

What version of React are you using?

16.4

What version of react-beautiful-dnd are you running?

9.0.2

What browser are you using?

Chrome 69

Demo

Demo The weird thing is, this seems to be an edge case with the height of the container, if you change 90vh to 50vh, it works as expected.

And in my case, I need to have my sidebar sticky and taking full height of the viewport - my header's height.

zachmoore12 commented 6 years ago

Any reason your div that is positioned relative cannot be 100% height? Adding that gets it to work for me:

https://codesandbox.io/s/pmj8pro3wj

alexreardon commented 6 years ago

we currently do not support position:sticky. We will be introducing partial support for position:fixed in version 10 #838

skflowne commented 6 years ago

@zachmoore12 I mainly added this div to simulate the window / sticky behavior that's why it is "200vh"

@alexreardon I suppose it's not trivial to implement if you don't have it in yet. Can you tell me more why it is difficult to do ? Or if it's just lack of time maybe I could do a PR.

alexreardon commented 5 years ago

It has to do with something no moving on the page when it is expect to. I think for now it is best to say that this is not supported. If improve support for fixed lists then this should fit into that

MutazAshhab commented 1 year ago

Hi @alexreardon I am willing to fix this issue/support this functionality, i just need a pointer on where to do the work and I can take it from there.