mobile web scrolling

[Seol827]

Description

Hello again, In my mobile webpage, I found that touch scrolling doesn't work (fullpage). But the extension (drag and move) is doing well. So I wonder If I apply 'dragAndMove' extension, Is it impossible to use with fullpage basic function? Or Should I apply some options?

So I just applied 'responsiveWidth' still now.

<ReactFullpage
          responsiveWidth={768}
          credits={{ enabled: false }}
          pluginWrapper={pluginWrapper}
          licenseKey={''}
          scrollingSpeed={1000}
          dragAndMove={'horizontal'}
          dragAndMoveKey={''}
          controlArrows={false}
          navigation={true}
          slidesNavigation={true}
          scrollOverflow={false}
          onLeave={function (origin, destination, direction) {
            var navigation = document?.querySelector('#fp-nav')

            if (destination.index > 4) {
              navigation?.classList.add('remove')
            } else {
              navigation?.classList.remove('remove')
            }
          }}
          responsiveSlides={true}
          ...

[Seol827]

about 'responsiveWidth'

During the first rendering, fp-viewing is doing well,

But If I scroll down and go back to the first section, the fp-viewing has a problem. It should be 'fp-viewing-0' or 'fp-viewing-0-0'. right? other sctions have same problems. Each does not have a suitable section number. Is that Scrolling problem? How can I fix it?

<ReactFullpage
          responsiveWidth={768}
          credits={{ enabled: false }}
          pluginWrapper={pluginWrapper}
          licenseKey={''}
          scrollingSpeed={1000}
          dragAndMove={'horizontal'}
          dragAndMoveKey={''}
          controlArrows={false}
          navigation={true}
          slidesNavigation={true}
          scrollOverflow={false}
          onLeave={function (origin, destination, direction) {
            var navigation = document?.querySelector('#fp-nav')

            if (destination.index > 4) {
              navigation?.classList.add('remove')
            } else {
              navigation?.classList.remove('remove')
            }
          }}
          responsiveSlides={true}

[alvarotrigo]

Can you reproduce this same issue on the example-drag-and-move.html file that came with the package with your Drag And Move extension together with the fullpage.dragAndMove.min.js file?

If so, can you specify how are you scrolling up/down? Using mouse wheel? Dragging with mouse movement on desktop? Dragging on touch screen device / mobile?

Also, if your are using dragAndMove: 'horizontal' I assume you are only using the touch / drag scroll on horizontal slides? But you are talking about scrolling up/down, so can you clarify this?

[Seol827]

@alvarotrigo First of all, the project I am applying is not for my personal use, so it will be difficult to provide the html file separately. Nevertheless, if it is too necessary, it will take time, but I think I can newly code and send you the html file without the business elements. To explain more about scrolling, As you can see in the code I attached (<Reactfullpage />), I applied as follow.

• dragAndMove => horizontal slides : This is working fine. (not mouse wheel. just mouse movement on desktop and on mobile, touch is also fine.)
• the problem : fullpage basic function with up/down touch scrolling on mobile. on desktop, mouse wheel scrolling is working fine. only for mobile, it doesn't work. so That's why I wonder if I should add an option or method separately.
• Due to the above problems, I applied responsiveWidth={768}. Therefore, the fullpage was not applied in the mobile environment, and it became a normal scroll mode. However, the problem is that fp-viewing does not work properly "in a normal scrolling environment." The fp-viewing changes according to the scroll position, but the applied position is strange. Therefore, the css of dragAndMove horizontal located in the first section is not applied.

[alvarotrigo]

Can you please clarify this for me?

Can you reproduce this same issue on the example-drag-and-move.html file that came with the package with your Drag And Move extension together with the fullpage.dragAndMove.min.js file?

[alvarotrigo]

Due to the above problems, I applied responsiveWidth={768}. Therefore, the fullpage was not applied in the mobile environment, and it became a normal scroll mode. However, the problem is that fp-viewing does not work properly "in a normal scrolling environment." The fp-viewing changes according to the scroll position, but the applied position is strange. Therefore, the css of dragAndMove horizontal located in the first section is not applied.

Ok, this is what I needed to know. The problem is not related with Drag And Move. It seems there's a bug in fullPage.js when using autoScrolling gets turned off (which is the result of activating responsiveWidth)

I've created a new issue about this on the fullPage.js repository.

[alvarotrigo]

The issue has been fixed in the latest release react-fullpage 0.1.34! 🥳 Let me know if everything is alright now.

[Seol827]

@alvarotrigo I installed @0.1.34, and looks working well! Thanks! (●'◡'●)

[alvarotrigo]

Awesome! 👍