subtirelumihail / react-fullpage

A react implementation of fullpage.js
304 stars 105 forks source link

`react-fullpage` prevent my horizontal swipe event #55

Open amerllica opened 6 years ago

amerllica commented 6 years ago

I'm using pure CSS horizontal carousel in mobile view, Like google mobile version carousel, Just like below image:

carousel google

But when I use react-fullpage, it doesn't work, also when I swipe horizontal then I see none in browser console, it means not up or down, and I believe react-fullpage prevent this action.

I think it is a BUG, if not how can I settle my issue?

cntrlz commented 6 years ago

It's likely that when the SectionsContainer adds an event listener for touchmove, it also prevents default:

touchsurface.addEventListener('touchmove', function (e) {
                e.preventDefault(); // prevent scrolling when inside DIV
            }, false);

This is on line 271 in /dist or 225 in /src in your node_modules/react-fullpage folder.

You can comment-out the line e.preventDefault(); or just remove the event listener entirely. I myself had the same issue, but doing this might introduce other bugs. Still checking on that.

amerllica commented 6 years ago

I can not understand why react-fullpage developer or developers use e.preventDefault(), I settled my problem with a different solution, I use Hammer.js touch tracking function and control the horizontal scroll bar.