Scrolling within vertical containers

[richrout]

Hello!

I have a trello-ish "task" system, and when I try to add "overflow-y: auto" on my "lane" to make it scroll independently (aka not with the whole page) - this breaks the functionality when you drag an individual card across the screen. It will not scroll the whole page if the card is over a lane towards the edge of the screen. Moving it out of the lane will scroll the page like normal.

Can provide more information/reproduction if it is needed. But any ideas if there is a work around for this? Or if this should work?

[richrout]

This is reproducible if you just add the following styles to the .smooth-dnd-container on the demo page.

    max-height: 400px;
    overflow-y: auto;

Try dragging a card towards the left/right side where it should start scrolling, instead it does nothing.

[HoaDevDn]

yep
i got the same issue =((
Can't scroll if we set max-height for the column
could you hot fix?
@johanneswilm @richrout @klaasman @kutlugsahin

[gregoryforel]

Hello @johanneswilm , @richrout , @klaasman @kutlugsahin ! A gentle bump, in case any of you has some time to look into this issue. Many thanks in advance in any case, and thanks for the library!

[richrout]

I have a pull request that I tested and works for the "Trello scenario"

No one has looked at the PR though: #55

[gregoryforel]

Thanks @richrout ! 3 questions if I may:

• "puts the onus on the consumer to set up their UI in a way that overlaps are easy to navigate": do you actually have anything in particular to do other than properly setting up your CSS correctly and setting disableScrollOverlapDetection to true?
• Any idea how the guys who created react-trello did it? They do use react-smooth-dnd, and their lib works.
• Do you have a working repo with your solution that demos your work that I could check?

[richrout]

For sure.

• yeah that's all it means.
• they use a fork now. I don't think this was a problem until the "overlap scroll detection" was added.
• nothing right now. I had quickly modified it on the demo page to show it in the screenshots above. Lemme know if you want me to create something, or even a separate demo page to show how to do it.

[gregoryforel]

No need to demo. Thank you so much! It works like a charm. Maybe you can bump the guys ref your PR again? So many people have the same issue.