Scrolling within vertical containers

kutlugsahin / smooth-dnd

drag and drop library for javascript

MIT License

615 stars 148 forks source link

Scrolling within vertical containers #54

Open richrout opened 5 years ago

richrout commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

No one has looked at the PR though: #55

gregoryforel commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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.