Fullpage.js: normalScrollElements only for horizontal movement

[lambert-velir]

Description

I have a static container inside a section that has overflow-x: auto on it. It seems that I'm able to horizontally scroll on desktop with a mac mouse or trackpad, but I can't scroll horizontally on a touch device with my finger. I'm not sure if it's related to scrollOverflow: true or not, but I do need that option.

Link to isolated reproduction with no external CSS / JS

https://codepen.io/lambert-velir/pen/WWMKBQ

Steps to reproduce it

1. Open the fullpage view of the codepen on a touch device
2. Try to scroll through the green boxes

Versions

Chrome for android
iOS Simulator on Mac

[quadeinc]

Did you tried touch-action: pan-x; ?

[lambert-velir]

Hmm, It's definitely not working for my in Chrome on Android or the iOS simulator.

I can't move the green boxes over to see the box labeled 3.

Just to clarify, are you able to horizontally scroll the boxes, and vertically scroll the full page slides?

[alvarotrigo]

Have you tried using the normalScrollElements option?

[lambert-velir]

Thanks for the quick reply!

I updated the codepen to use normalScrollElements on the blue horizontal-container element, and it allows me to scroll horizontally. But it prevents me from swiping up to advance to the next slide. This is a problem on a phone, because those green boxes fill most of the viewport.

Is there a way to allow horizontal overflow scrolling and maintain the fullpage up/down slide handlers?

[alvarotrigo]

Is there a way to allow horizontal overflow scrolling and maintain the fullpage up/down slide handlers?

Unfortunately fullPage.js doesn't provide such option at the moment. You would have to code it yourself.

I'll mark this issue as an enhancement in case we can implement it in future versions of fullPage.js!

[lambert-velir]

Ahh bummer. To clarify, this is only an issue with touch, it works fine with the mac mouse or trackpad.

What would be involved in coding it myself? I assume it would be to use autoScrolling: false?

What would be involved with a fix to the source code? I could potentially look into making a PR if you know at a high level what needs to be done.

[alvarotrigo]

You would have to detect if the touch movement is horizontal or vertical and then allow the vertical one.

[ArthurBrito]

@alvarotrigo This feature it's very important to me and I'm keen to make a Pull Request to implement that. However, it would be ideal to have some tips in how to implement that to make my life easier and keep the fullPage API easy to use. Creating a property normalScrollYElements normalScrollXElements for specific Y or X scrolls would be a good design in your opinion?

[alvarotrigo]

I would prefer not to keep on adding new options.
Perhaps we can apply normalScroll in both directions when using normalScrollElements.
I don't see why we would only apply it in 1 :)

[ArthurBrito]

@alvarotrigo Thanks for your answer. In my use case (https://coinstash.com.au/#blog) I have a section that has a horizontal scroll only. Thus when users are trying to scroll or drag the page vertically to go to the next section it won't work if they are clicking or touching the div that the scroll is disabled (to allow the horizontal scroll). I know that I can check the scroll event and see which direction the user is moving and use the api to go to the next or previous section. However, I'd like a more developer-friendly way to implement that. So I think that by disabling only the horizontal scroll I could have that. That makes sense to you or am I missing something?

[alvarotrigo]

Right I see.

Then I guess to make it simple we can just provide a data attribute in the element itself, for example data-normalscroll="x".
Then we can look for that attribute and if we find it, we can disable horizontal scrolling two but allow vertical.

[ArthurBrito]

That would do!

[gauini]

this is a great enhancement on normalScrollElements - @alvarotrigo do you have an estimation of when you'll implement this attribute for the normal scroll parameter?

[alvarotrigo]

Not really. But hopefully for some future release :)
If you really need it now use the contact form and we set a quote for a priority request.