search

ilyashubin / scrollbooster

Enjoyable content drag-to-scroll library
https://ilyashubin.github.io/scrollbooster
MIT License
993 stars 80 forks source link

Lock scroll when dragged horizontally/vertically #47

Closed alexwidua closed 4 years ago

alexwidua commented 4 years ago

Improve the interaction for mobile devices: If lockScrollOnDragDirection is set to 'horizontal' and a horizontal drag is detected, default touch events will be prevented; if a vertical drag is detected, the drag position won't be updated.

Vice versa if lockScrollOnDragDirection is set to 'vertical', eventhough I'm not sure if there is a use case for this.

Goal is to increase UX for mobile devices since the pointerDownPreventDefault prop alone wasn't enough and the page jumps around if a scrollable element is being dragged (somewhat referencing #28)

Codesandbox Demo

alexwidua commented 4 years ago

Added a similar approach for trackpad (scroll) events: If preventDefaultOnEmulateScroll is set to 'horizontal', horizontal default events will be prevented but vertical scrolling is still enabled. This is useful if you want to prevent trackpad gestures but still want to allow vertical navigation. I think this is kinda what #23 was going for.

I've updated the Codesandbox demo above.

ilyashubin commented 4 years ago

thanks for your PR! Very useful