Прокрутка содержимого за границами фрейма

Для фрейма прототипа можно настроить поведение содержимого при прокрутке.

Pixso поддерживает три варианта: вертикальную прокрутку, горизонтальную прокрутку и прокрутку в обоих направлениях.

1. Вертикальная прокрутка

Вертикальная прокрутка позволяет перемещаться вверх и вниз внутри фрейма, имитируя просмотр длинной веб-страницы, например в приложении интернет-магазина или новостном приложении.

2. Горизонтальная прокрутка

Горизонтальная прокрутка позволяет перемещаться влево и вправо внутри фрейма, сохраняя положение по вертикали. Обычно она используется для создания каруселей.

3. Горизонтальная и вертикальная прокрутка

Прокрутка в обоих направлениях позволяет перемещаться внутри фрейма вверх, вниз, влево и вправо. Обычно она используется для просмотра карт.

Совет: чтобы прокрутка работала, содержимое должно выходить за границы фрейма.

Настройте прокручиваемую область просмотра

1. Создайте внешний фрейм для видимой области прототипа. Его размеры задают область просмотра.
2. Поместите внутрь более длинное или широкое содержимое. Оно должно выходить за границы внешнего фрейма в направлении прокрутки.
3. Выберите внешний фрейм и откройте панель Prototype.
4. Задайте вертикальную, горизонтальную или одновременно горизонтальную и вертикальную прокрутку.
5. Запустите прототип и проверьте, доступно ли содержимое за границами области просмотра.

Для вертикальной страницы содержимое должно быть выше области просмотра, для горизонтальной ленты — шире. В области наподобие карты содержимое должно выходить за границы в обоих направлениях.

При демонстрации вертикальная прокрутка работает с помощью колеса мыши или перетаскивания. Горизонтальную и двунаправленную прокрутку проверяйте перетаскиванием.

Если фрейм не прокручивается

• Убедитесь, что содержимое вложено во фрейм области просмотра, а не находится рядом с ним.
• Проверьте, выходит ли оно за границы в выбранном направлении.
• Задайте настройку прокрутки именно фрейму области просмотра, содержащему объекты.
• Проверьте результат при воспроизведении прототипа, а не только на холсте дизайна.