0

I'm using IScroll on a page that makes heavy use of ScrollMagic, but cannot for the life of me get IScroll to function. The primary issue appears to be that most (but not all) of the elements in the page need to take up 100% of the viewport's height, since they are set up as slides with some complex animations inside of them. In order for height: 100% to work, however, all the parent elements must be set the same. This is causing IScroll to calculate the height of the wrapper element at the viewport height, and thus it thinks there's no more content beyond that. I'm working on a jsfiddle to test/demonstrate the problem, but wondered if anyone else had run into a similar situation before.

ken.dunnington
  • 905
  • 1
  • 7
  • 20

1 Answers1

2

The problem is that the height is always calculated relative to the next offset parent.
Since the inner iScroll wrapper must be positioned relative it is every child's offset parent and thus the basis for their height calculation.

There is a simple workaround though:
Instead of height: 100% use height: 100vh in your CSS.
Viewport units is something only few people seem to know about even though support for it is absolutely sufficient: http://caniuse.com/#feat=viewport-units

hope this helps,
J

Jan Paepke
  • 1,997
  • 15
  • 25
  • That's excellent info, thanks! It hasn't quite solved the problem, however. I set both the wrapper and its content (the div that contains all the slides) to 100vh and position: relative, but the offset height and clientHeight are coming back as the viewport height, so IScroll sees no additional content to scroll to. Luckily, the animations are not tied to the scrollbar directly, so it does work without IScroll, but I'd like to figure this out anyway. Will post a sample as soon as I have more time. :) – ken.dunnington Nov 25 '14 at 17:55
  • actually the wrapper shouldnt have 100% height. the height of the inner wrapper should reflect the total length of your content. but inside that wrapper sections can have the viewport height.... – Jan Paepke Nov 26 '14 at 15:53