No scroll for mobile advanced demo if cursor inside setPin

[maubut]

hey,

In your example for mobile support, if the cursor is directly on the blue box and we scroll the page.. nothing happens. The cursor need to be outside the blue box while you scroll.

The problem seems to come from the fixed position and the overflow-y of the container. Do you have any solutions ? I need to do similar effect with full width..

http://janpaepke.github.io/ScrollMagic/examples/expert/mobile_advanced.html

[janpaepke]

Hi!

I never noticed this, because I mostly tried it on mobile. :)
This is a very interesting bug, thanks for bringing it to my attention.
It only occurs DURING the pin on a desktop device, when the cursor is over the pinned element.

It seems the reason is that it no longer regards the element as a child of the parent container but of the body. But in this case we want to scroll the container and not the body.
I played around a little with the css to prevent the body from receiving the event, but so far no luck.

I will create a JS fiddle and post it on stackoverflow.
Maybe somone there has an Idea...

I'll keep ya posted!
regards, Jan

UPDATE:
check the stackoverflow entry here: http://goo.gl/S4bJXc
And the jsfiddle here: http://jsfiddle.net/LwY2j/4/

[janpaepke]

Soooo this was fast! (stackoverflow rules)

The easiest way is using this css for the fixed element:

#fixed {
  pointer-events: none;
}

The problem is, that it is not supported by older browsers:
http://caniuse.com/#search=pointer-events

A complete workaround requires javascript and I have tested this and it seems to work:

$('#fixed').on('mousewheel DOMMouseScroll', function(event) {
    $('#content').scrollTop($('#content').scrollTop() - (event.originalEvent.wheelDelta ||  event.originalEvent.detail*30));
});

See here for more details: http://stackoverflow.com/questions/13494850/a-way-to-scroll-an-underlying-div-when-mouse-is-on-top-of-a-fixed-div?answertab=votes#tab-top

I will add the pointer events css to the examples. :)

regards,
J