ScrollView

Справочник по API

Обзор

ScrollView наследуется от view и позволяет прокручивать любые из вложенных компонентов как в горизонтальном, так и в вертикальном режиме. Компонент удобно использовать с длинными однородными элементами данных, например с текстовыми темплейтами.

Инициализация

Рационально использовать ScrollView как контейнер с прокруткой, а текст помещать в HTML.

<div id="mybox1">Some very long article-1</div>
<div id="mybox2">Some very long article-2</div>
<div id="mybox3">Some very long article-3</div>

После чего вы можете задать ориентацию и сослаться на нужные части текста по ID. Содержимое HTML вкладывается в компонент при помощи специальных темплейтов данных:

webix.ui({
    view:"scrollview",
    id:"verses",
    scroll:"y", // вертикальный скролл
    height: 160, 
    width: 150,
    body:{
    rows:[
        { id:"verse_1", template:"html->my_box1" }, // ID контейнеров
        { id:"verse_2", template:"html->my_box2" }
        // больше темплейтов
    ]   
 }
});

Основные свойства:

scroll - (boolean/string) включает/отключает полосу прокрутки. Свойство может принимать следующие значения:
- "y" (или true) - включает вертикальную прокрутку (значение по умолчанию);
- "x" - включает горизонтальную прокрутку;
- "xy" - включает обе прокрутки;
- "auto" - включает прокрутку, только если содержимое списка больше контейнера;
- false - отключает прокрутку.
height - (number) устанавиливает длину компонента;
width - (number) устанавиливает ширину компонента;
body - (object) компонент, который нужно поместить внутрь ScrollView, в массив rows или cols, в зависимости от ориентации.

Related sample: Scrollview

Обратите внимание что для появления полосы прокрутки, внутренний элемент должен быть больше (шире или выше), чем ScrollView внутрь которого он помещен. Вы можете настроить размер внутреннего элемента с помощью свойств width/height/autoheight/autowidth.

Работа с ScrollView

Внутри ScrollView (как и внутри любого компонента с полосой прокрутки) вы можете:

прокрутить до определенного положения компонента;
определять положение: как далеко нужно прокрутить от верхней и левой границы ScrollView;
включать, отключать и указывать направление прокрутки.

Подробнее о Scroll-контроле в отдельной статье.

Статьи по теме

Наверх

If you have not checked yet, be sure to visit site of our main product Webix ui library and page of scroll layout product.