`hideScrollbars` prevents horizontal scrolling about react-indiana-drag-scroll HOT 15 CLOSED

Can confirm the overflow properties are conflicting and preventing the scroll with a wheel. By unchecking overflow: hidden the scroll function with the mouse wheel is returned.

Also fixed by overriding with !important on the container.

from react-indiana-drag-scroll.

@maxwellfortney do you want to preserve scroll by mouse wheel along with scroll by mouse drag?

from react-indiana-drag-scroll.

@nemosmithasf, this issue is resolved in 3.x.x. Feel free to try it now:

npm install react-indiana-drag-scroll@next

from react-indiana-drag-scroll.

Hello, @nemosmithasf!

It's the good question. I'm not sure, what's the behavior should be for a wheel (a touchpad should work well, but I receive the reports, that sometime it doesn't).

You are able to scroll by a wheel only vertically, so it can be perceived as an oddly behavior.

from react-indiana-drag-scroll.

I've tried scrolling using the horizontal scroll wheel on an MX Master 2, and it didn't work.
I also tried using the MacBook Pro trackpad for horizontal scrolling, which also didn't work.

Interestingly, if I turn off hideScrollBars, then the horizontal functionality returns. I was also able to hide the bar using the -webkit-scrollbar styling detailed above

from react-indiana-drag-scroll.

@nemosmithasf When you set hideScrollBars to true, the container must have overflow: auto;. If you inspect the element, you'll notice indiana-scroll-container--hide-scrollbars class is added with overflow: hidden.

Hope this helps! :)

from react-indiana-drag-scroll.

just adding to @sntk 's post, if you change the overflow:hidden => overflow: auto or scroll, you will have scroll ability and the scroll bars will still be hidden because of the styling you have placed on them.
FYI a lot of those rules ie.
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar

are not standard as per MDN and are advised against using.

Other than that, nice job.

from react-indiana-drag-scroll.

Hello, @YLeventhal!

are not standard as per MDN and are advised against using.

Do you have any other idea how to hide scrollbars and preserve native mobile scroll?

from react-indiana-drag-scroll.

@Norserium For my use case yes, I needed the mouse wheel as well as the mouse drag to work. Adding that css allows that. Ideally a toggle like preventWheelScroll would be nice.

Also this is a separate feature request, but I was trying to make it so the div would scroll horizontally without having to hold down shift. But I was unable to get this to work. Not critical, but a nice to have.

from react-indiana-drag-scroll.

@maxwellfortney, according to your code above you don't mind if scrollbars appear?

from react-indiana-drag-scroll.

No, the scrollbars are still hidden with that CSS. The properties are just crossed out because they are added from CSS autoprefixer I assume, and are not being used on chrome.

from react-indiana-drag-scroll.

To be honest, and I don't mean this in a rude way, but the performance of this package is awful compared to react-scrollbooster. Your package was very choppy for me when using the mouse drag, and was pretty much unusable when I needed to access the onScroll property, react-scrollbooster is quite smooth using both the transform, and native scroll methods.

from react-indiana-drag-scroll.

@maxwellfortney, it's okay. But personally I don't feel the perceptible difference (except that scrollbooster has inertia). Could you provide the examples to compare?

from react-indiana-drag-scroll.

Unfortunately I scrapped the code using this package and didn't commit it, but it was about a 200x4 horizontal grid of emojis characters. I can try to make a comparison demo for you tomorrow.

from react-indiana-drag-scroll.

@maxwellfortney I would appreciate it. And, of course, there's no rush.

from react-indiana-drag-scroll.