search

ilyashubin / scrollbooster

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

Vertical scroll on mobile #28

Open sabvente opened 4 years ago

sabvente commented 4 years ago

Using the following options:

new ScrollBooster({
    viewport: scrollCanvas,
    scrollMode: 'transform',
    direction: "horizontal'
});

Scrolling the page on the Y axis with drag doesn't work, because the viewport catches the events. The users cannot scroll the page on the Y axis, if the canvas occupies the whole screen on mobile.

I can provide an example of a page where the correct behaviour can be observed (our services section): https://www.instrument.com/what-we-do/

The possible fix is to check the first pointer drag event. If it's not in the same direction as the configured direction, then do nothing. Perhaps a more robust solution is to calculate the angle of the two lines and apply a threshold.

ilyashubin commented 4 years ago

Hello! Thank you for suggestion. I might implement it in the future, for now I added a new property pointerDownPreventDefault to disable window scroll lock on mobile

sabvente commented 4 years ago

Thank you @ilyashubin !

kskrlinnorth2 commented 4 years ago

pointerDownPreventDefault doesn't work well when dragging with mouse, it is highlighting text, selecting ghost images, etc.

Do you have any suggestions? Or maybe implement this property just for touch events and not mouse events also..

sooxt98 commented 4 years ago

@ilyashubin i have a suggestion, it's better to turn pointerDownPreventDefault off when viewport stop scrolling else keep it on; so it would works perfectly

this is my current work around and it only works on v1.1, if the horizontal scroll not too much, allow body to scroll, else ...

image