如果内容的高度为100％，IScroll无法正常工作？

我在大量使用ScrollMagic的页面上使用IScroll，但无法让我的生活中的IScroll正常工作。主要的问题似乎是，页面中的大多数（但不是全部）元素需要占据视口高度的100％，因为它们被设置为幻灯片，其中包含一些复杂的动画。但是，为了使height: 100%有效，所有父元素必须设置相同。这导致IScroll计算视口高度处的包装元素的高度，因此它认为除此之外没有其他内容。我正在研究一个jsfiddle来测试/演示这个问题，但是想知道是否有其他人之前遇到类似的情况。如果内容的高度为100％，IScroll无法正常工作？

来源

2014-11-24 ken.dunnington

问题是，高度始终是相对于下一个偏移父项进行计算的。
由于内部iScroll包装必须相对定位，因此它是每个孩子的偏移父亲，因此也是他们身高计算的基础。

虽然有一个简单的解决方法：
而不是height: 100%在您的CSS中使用height: 100vh。
视口单位事只有少数人似乎知道即使对它的支持是绝对足够了：http://caniuse.com/#feat=viewport-units

希望这有助于
Ĵ

来源

2014-11-25 12:14:42

这是非常好的信息，非常感谢！但是，它并没有完全解决这个问题。我将包装器及其内容（包含所有幻灯片的div）都设置为100vh，位置为：relative，但偏移高度和clientHeight作为视口高度返回，因此IScroll看不到要滚动到的其他内容。幸运的是，这些动画并没有直接绑定到滚动条上，所以它在没有IScroll的情况下也能正常工作，但是我想要解决这个问题。我会有更多时间后立即发布样品。 :) – 2014-11-25 17:55:06

实际上包装不应该有100％的高度。内包装的高度应该反映您的内容的总长度。但在里面的包装部分可以有视口高度.... – 2014-11-26 15:53:08

如果内容的高度为100％，IScroll无法正常工作？

回答

相关问题