search

itpresidents / thesis-archive-2020

10 stars 1 forks source link

Remove bouncing on mobile #93

Closed EonYang closed 4 years ago

EonYang commented 4 years ago

On mobile, when dragging, it feels unpleasant because of the elastic bouncing feature of Safari.

The only way to get rid of it is set overflow of body to hidden. But we have to do it only on the explore page, for it will stop scrolling features on other pages.

I added this feature on BigHeader because I already have something similar in that component. However, I don't think it's a good place to toggle this feature. Please let me know if you have a suggestion.

Feels good creating PR again!

oveddan commented 4 years ago

Thanks for looking at this!! It's been bugging me too.

I'm not sure we want to disable scrolling? What if we just dont use the draggable functionality on mobile? I feel like we can check if is mobile then set useDrag if its not mobile.

Also a better place to fix this is useEffect within Explore since thats where we want the change to happen. It can be removed with the cleanup function of useEffect

EonYang commented 4 years ago

I think I have tried different solutions.

On mobile:

So I disable scrolling only when (isMobile && onExplorePage).

I will try to move it into useEffect in Explore, sounds cool.

oveddan commented 4 years ago

@EonYang looks good! did you properly test it out? Can you test on safari and firefox?

EonYang commented 4 years ago

Good question downloaded firefox just for this.

Desktop:

Mobile:

Tested on those browsers listed above.