Я использую IScroll на странице, которая интенсивно использует ScrollMagic, но ни за что не могу заставить IScroll функционировать. Основная проблема заключается в том, что большинство (но не все) элементов на странице должны занимать 100% высоты области просмотра, поскольку они настроены как слайды с некоторыми сложными анимациями внутри них. Однако для того, чтобы height: 100% работал, все родительские элементы должны быть установлены одинаковыми. Это приводит к тому, что IScroll вычисляет высоту элемента-обертки на высоте области просмотра и, таким образом, считает, что за пределами этого содержимого больше нет. Я работаю над jsfiddle, чтобы протестировать/продемонстрировать проблему, но мне интересно, сталкивался ли кто-нибудь еще с подобной ситуацией раньше.
IScroll не работает, если содержимое имеет высоту 100%?
Ответы (1)
Проблема в том, что высота всегда рассчитывается относительно следующего смещенного родителя.
Поскольку внутренняя оболочка iScroll должна располагаться относительно, она является смещенным родителем каждого дочернего элемента и, таким образом, является основой для расчета их высоты.
Однако есть простой обходной путь:
Вместо height: 100% используйте height: 100vh в своем CSS.
О единицах области просмотра, похоже, знают лишь немногие, хотя их поддержка абсолютно достаточна: http://caniuse.com/#feat=viewport-units
надеюсь, это поможет,
J
person
Jan Paepke
schedule
25.11.2014
Это отличная информация, спасибо! Однако это не совсем решило проблему. Я установил и оболочку, и ее содержимое (div, который содержит все слайды) на 100vh и position: относительный, но высота смещения и clientHeight возвращаются как высота области просмотра, поэтому IScroll не видит дополнительного содержимого для прокрутки. К счастью, анимация не привязана напрямую к полосе прокрутки, поэтому она работает без IScroll, но я все равно хотел бы с этим разобраться. Выложу образец, как только у меня будет больше времени. :)
- person ken.dunnington; 25.11.2014
на самом деле обертка не должна иметь 100% высоты. высота внутренней оболочки должна отражать общую длину вашего контента. но внутри этих разделов оболочки может быть высота области просмотра....
- person Jan Paepke; 26.11.2014
