Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

When user in the bottom of scrollable list, scroll up is not working #628

Closed
SimchaShats opened this issue Jul 9, 2018 · 15 comments
Closed

Comments

@SimchaShats
Copy link

SimchaShats commented Jul 9, 2018

Bug: When user in the bottom of scrollable list, and drag bottom item to the top, scroll top is not working.

Expected behaviour: List should scroll up when user move draggable item to the top of the list

Actual behaviour: List is not scrollable

Steps to reproduce: Basic example from library with updates: https://codesandbox.io/s/3457zo2kn1

What version of React are you using: 16
What version of react-beautiful-dnd are you running: latest
What browser are you using: Chrome
Operating system: OSX (mac)

Demo ezgif com-video-to-gif

@SimchaShats SimchaShats changed the title When user in the bottom of scrollable list, scroll up s not working When user in the bottom of scrollable list, scroll up is not working Jul 9, 2018
@alexreardon
Copy link
Collaborator

alexreardon commented Jul 9, 2018

Please provide the information requested in our ISSUE_TEMPLATE or we cannot action this

@SimchaShats
Copy link
Author

@alexreardon Updated

@alexreardon
Copy link
Collaborator

I cannot seem to reproduce what you are seeing

https://codesandbox.io/s/o4yljr6999

@SimchaShats
Copy link
Author

Ah ok thanks, but what wrong with my example? I took there basic example from the library page. I had same issue in my project...

@alexreardon
Copy link
Collaborator

I cannot reproduce it on my machine with your example: https://codesandbox.io/s/3457zo2kn1

...?

@alexreardon
Copy link
Collaborator

I cannot reproduce it in FireFox or Chrome

@alexreardon
Copy link
Collaborator

Using the example you provided...

@SimchaShats
Copy link
Author

SimchaShats commented Jul 9, 2018

Ah may be because I'm using mac, I attached gif from codesandbox that did an hour ago. And your example that you attached now is working on my machine

@SimchaShats
Copy link
Author

SimchaShats commented Jul 9, 2018

Ah found, it doesn't work if there is exististing horizontal scroll, if remove it - it works. Not sure if it's a bug or no...

@alexreardon
Copy link
Collaborator

alexreardon commented Jul 9, 2018 via email

@SimchaShats
Copy link
Author

Here the example: https://ufile.io/4qd3a

@alexreardon
Copy link
Collaborator

alexreardon commented Jul 9, 2018

I found the issue! When you are using overflow: scroll it is adding a horizontal scroll bar. This difference is messing with the auto scrolling calculations.

Try using one of the following

  • overflow: auto
  • overflow-y: scroll
  • overflow-y: auto

All of these will work how you expect them to!

Not sure if it is worth looking into the issue caused by the redundant scroll bar. The issue is caused because the redundant scroll bar is messing with our internal dimension model

@alexreardon
Copy link
Collaborator

I am keen to solve the underlying issue though :)

@SimchaShats
Copy link
Author

ok thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants