ilyashubin/scrollbooster

Vertical scroll on mobile

sabvente opened this issue · 4 comments

sabvente commented

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

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

Thank you @ilyashubin !

kskrlinnorth2 commented

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

@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