Mobile scroll container issues

[yaronguez]

Hi, thanks for the incredible plugin! I'm having a lot of fun with it. I've been having some trouble with setting a container for mobile support. You can see the site in action at http://royalheartmusic.com/animation.

The problem is that, since I added the container scroll method for mobile support, I can no longer scroll when the mouse / finger is hovering over a pinned element. You have to move your mouse / finger to a black area outside of the pinned element to get the scroll to work. This isn't always the case. Sometimes it only happens if you click on the pinned element. Either way it's not ideal. Any ideas?

Another issue that I was having was that setting the scroll container to 100% height would make it stretch to hold all of the content rather than just the size of the viewport. Thus there would be no scroll effect while scrolling down. This might have to do with the fact that the elements within the container are all sized using vh and vw units in order to fit the viewport, maintain aspect ratio, and not crop the image. So instead I set the height of the container to 100vh. This solved that problem and it works on mobile though I'm not sure if that approach is correct.

Thanks so much for your help!
Yaron

[janpaepke]

Hi Yaron,

yes I know what you mean.
This is due to the fact that even child elements, if fixed (pinned), catch all the scroll events because they are suddenly handled as part of the body rather than their parent.
This makes them lie on a higher layer and thus "steal" all the scroll events.

There's several fixes for this, the easiest of them being to tell the element to ignore all events. (which works if there are no user interactions inside of your element).
For more information read this and the linked stackoverflow post: #34

hope this helps.

regards,
J

[yaronguez]

Thanks so much for the reply! That thread was super helpful. Adding
pointer-events: none; to the fixed element did the trick. I don't care
much about supporting older browsers on this site (benefits of making a
website for your band, haha).

Another side effect of the container mobile trick, though, is that the
mobile address bar never goes away since the page never really scrolls
down. Any idea what the best way of solving that is?
Yaron

---

Yaron Guez
Software Architect / Developer
(781) 767-7434

On Mon, May 19, 2014 at 1:26 AM, Jan Paepke notifications@github.comwrote:

Hi Yaron,

yes I know what you mean.
This is due to the fact that even child elements, if fixed (pinned), catch
all the scroll events because they are suddenly handled as part of the body
rather than their parent.
This makes them lie on a higher layer and thus "steal" all the scroll
events.

There's several fixes for this, the easiest of them being to tell the
element to ignore all events. (which works if there are no user
interactions inside of your element).
For more information read this and the linked stackoverflow post: #34#34

hope this helps.

regards,
J

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/82#issuecomment-43476891
.

[janpaepke]

Well if you're using iScroll you could go over and ask the folks on iScroll -> https://groups.google.com/forum/#!forum/iscroll
Other than that I'd say just leave the address bar there. ;)

[yaronguez]

I'm not using iScroll. Basically what I'd like to do is either have the
first few pixels of scroll movement apply to the window rather than the
scroll container so that as the user scrolls down on a mobile device, it
hides the address bar the way every other website does, or maybe do this
scroll automatically with JS so the user isn't confused by two scroll bars.
I'll play around with it and let you know what I find.

---

Yaron Guez
Software Architect / Developer
(781) 767-7434

On Tue, May 20, 2014 at 11:36 PM, Jan Paepke notifications@github.comwrote:

Well if you're using iScroll you could go over and ask the folks on
iScroll -> https://groups.google.com/forum/#!forum/iscroll
Other than that I'd say just leave the address bar there. ;)

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/82#issuecomment-43716951
.