Auto-scroll moves up constantly during horizontal dragging! #1040
Comments
|
Okay, so this has to do with how auto scrolling works. If you drag something near the edge of a browser, we will scroll the browser if it can be scrolled. This is true even when the movement is on any plane (vertical or horizontal). In your posted example, i am not sure why the auto scroll only goes up and not also down as you move the item lower. This is worth looking into |
But the scrolling starts the instant I pick up the item, not when I move it to the edge of the screen. Also, why would it just start auto-scrolling in any available direction (always up), even when you are not on the top edge? |
|
I'll take a deeper look @matttk |
|
This one is confusing. When I moved it onto my local everything worked as expected... But there is an issue on the codesandbox one 🤔 |
|
Something strange going on. If I add this style it seems to work fine: html, body {
width: 100%;
height: 100%;
} |
|
This one is really hard to get right given there are so many ways a document can be setup 😲 |
I really thought I tried something like this but maybe I only applied it to the body or html... at any rate, this gets rid of the problem, even if it isn't really the solution. Thanks! 👍 |
|
I am working on a fix @matttk that will avoid you needing to add those styles |
|
I went a bit further, it actually has to do with the body / document behaviour differences between doctypes. By adding the HTML5 doctype to your file everything should work fine https://codesandbox.io/s/nk2k52xr3p <!DOCTYPE html>It could be worth calling this out in the docs |
|
your custom |
|
I have added a new doc section encouraging people to use the html5 doctype |
|
This issue has popped it's head up a few times in unexpected ways. I have added a dev only check to warn people if they are not using a html5 doctype |
|
Hi, |
Bug or feature request?
Bug
Expected behavior
Scrolling horizontally should never activate vertical autoscroll, unless you actually try to scroll vertically.
Actual behavior
Scrolling horizontally instantly activates vertical autoscroll up (until the top of the page is reached) under certain circumstances.
Steps to reproduce
I actually can't figure out how to reproduce it normally but I did manage to get the exact same behaviour in this codesandbox.io, using the example as a basis and building in my own code.
I still couldn't reproduce it until I noticed that if you shrink the vertical width of the screen, it eventually starts happening. This goes to my theory that there is something going on in the autoscroll calculations, involving the height of various divs...
Make the window as small as in the below picture and then drag a card left or right. The screen will start moving up slowly.
What version of
Reactare you using?16.3.1
What version of
react-beautiful-dndare you running?10.0.3
What browser are you using?
Chrome, latest version for Windows 10.
Demo
My demo is based on your boilerplate and another one that included SCSS support.
Again, make sure to shrink the screen enough (like in the above picture) and then start dragging.
However, in my actual code, I get the problem always, even with the browser window maximised. It's only that I couldn't figure out how to reproduce it in the code sandbox.
I can imagine that I am missing something necessary in the CSS, which is tripping up the autoscroll calculations but I can't find the problem... I'm hoping that this too small screen version I did find in the code sandbox is the same problem or at least related to mine.
The text was updated successfully, but these errors were encountered: