Fullpage.js: Propagate touch events on fixed positioned elements outside wrapper.

[stevensmith007]

I'm using the plugin to scroll some backgrounds.
I have a fixed element in the middle of the page.

On a computer, I have no problem because the scrollwheel works well no matter where I scroll.
But on a touch enabled device, if I touch my fixed elements and move to scroll, nothing happens because the touch event isn't captured by the plugin. If I touch outside the element, the plugin works because I'm actually touching the correct element. What can I do about this?

I don't think I can put the fixed element inside the "page section" itself.

HTML example

<section id="sections">
      <div class="page">Page 1</div>
      <div class="page">Page 2</div>
      <div class="page">Page 3</div>
      <div class="page">Page 4</div>
</section><!-- #sections -->

<section id="fixed-element">
        <img src="..." />
</section>

JS
$('#sections').fullpage();

Any help is appreciated. Thanks

[alvarotrigo]

Use normalScollElements for that element if you want to capture the touch events on it and if you do not want fullPage.js to scroll up or down (left or right) when you swipe over it.

[stevensmith007]

Hi, thank you for the quick reply.
Unfortunately, that did not solve my problem but I did however find the solution by reverting to version 2.5.9.

Here's a fiddle of what I want to achieve. Both work on desktop so try it out on an iPad.
Try dragging the white square up to switch section.

Version 2.5.9 : https://jsfiddle.net/7ossq3ju/2/embedded/result/
Works great!

Version 2.7.8 : https://jsfiddle.net/7ossq3ju/3/embedded/result/
It just drags the whole screen and it doesn't switch section.
If you drag outside the white square, it works but not if you drag inside.

Do you know why?

[alvarotrigo]

I'm getting exactly the oppositve behaviour on Chrome dev tools with touch enabled:

2.5.9 drags the whole page.

2.7.8 doesn't.

But I'll try at some point in a real device. Anyways, make sure to use normalScrollElementTouchThreshold as well.

[stevensmith007]

That's strange... I just tested it with Chrome dev tools also and I get the same results as on the ipad.

When I say it "drags the whole screen", I mean the default effect on an iPad when you can't scroll up or down more and it just bounces back.

Here's a quick video of the demos on IOS simulator : https://vid.me/afff

[alvarotrigo]

Add the fixed element inside the plugin's wrapper:
https://jsfiddle.net/7ossq3ju/4/embedded/result/

[stevensmith007]

Thanks but the point is to have the element always fixed on top of the scrollable sections so it can't be in the wrapper because that makes it scroll out of the window frame...

[alvarotrigo]

it can't be in the wrapper because that makes it scroll out of the window frame...

That's because browsers won't allow translate3d over fixed positioned elements
Use css3:false to solve the issue.

[alvarotrigo]

The problem is in this two functions addTouchHandler and removeTouchHandler.

Some guy wanted to do exactly the opposite to you not propagating fullPage.js touch events outside the plugin's wrapper and since then the plugin changed it behavior regarding this cases.

You could solve the problem by changing in both functions $(WRAPPER_SEL) for $(document).

I might make the change for the next release. Maybe I should add an option like propagateTouchEvents additionally to normalScrollElements. This way we can keep the mouse events while disabling only the touch ones when required.

[stevensmith007]

You could solve the problem by changing in both functions $(WRAPPER_SEL) for $(document).

Nice! Works perfectly! Thank you!
Just sent you a little donation. Have a beer on me!

[memeinc]

I might make the change for the next release. Maybe I should add an option like propagateTouchEvents additionally to normalScrollElements. This way we can keep the mouse events while disabling only the touch ones when required.

@alvarotrigo Is that implemented or planned ?

[alvarotrigo]

@memeinc the issue stills open. Which means nothing was done to solve it.

[realovich]

pointer-events: none;