Управление прокруткой страницы

Webix предоставляет широкий спектр инструментов для управления прокруткой страницы.

• Компоненты Webix оснащены вертикальной и горизонтальной полосами прокрутки, которые можно прятать и показывать с помощью API;
• Вы можете работать с прокруткой через общие методы и свойства;
• У библиотеки Webix есть отдельный компонента scrollview - компонент-контейнер с полосами прокрутки, в который можно поместить любое содержимое (обычный текст, HTML, Webix компоненты);

Настройка прокрутки

По умолчанию у компонента вертикальная выбрана вертикальная прокрутка. Вы можете изменить направление прокрутки через свойство scroll, которое принимает следующие значения:

• "y" или true - задаёт вертикальную полосу прокрутки;
• "x" - задаёт горизонтальную полосу прокрутки;
• "xy" - задаёт и вертикальную, и горизонтальную полосы прокрутки;;
• "auto" - задаёт полосы прокрутки, когда они необходимы (когда размеры содержимого превышают размеры контейнера);
• false - для компонентов без возможности прокрутки.

webix.ui({
    view:"list",
    id:"mylist",
    scroll:"x", //"y", "xy", "auto", false
    // ... конфиг
});

У некоторых компонентов есть свойства scrollX и scrollY, который принимают значения boolean и блокируют/устанавливают направление прокрутки. Ознакомьтесь с API для более подробной информации.

Прокрутка и динамическая загрузка

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

Читайте подробнее о динамической загрузке.

Прокрутка к определённому месту в компоненте

Если объём данных компонента слишком велик, хорошо бы задать возможность прокрутки к определённой его части при щелчке по кнопке.

Как это сделать:

1. Используйте метод компонента scrollTo(x,y):

Метод вызывается у объекта scrollview и принимает вертикальную и горизонтальную позиции. Если вы хотите указать ID кнопки в качестве позиции, код будет следующим:

{ view:"scrollview", id:"verses", body:{/* содержимое */} },
{
    view:"button", value:"Imitation of Spenser", id: "130",
    width:250, click:function(id){
        $$("verses").scrollTo(0, id*1);     // прокручивает к позиции top:130px 
    }
}

При разработке текущее значение прокрутки можно вычислить с помощью метода getScrollState(), который возвращает объект с параметрами X и Y.

Для сенсорных устройств вы можете указать продолжительность прокрутки. Укажите время в миллисекундах в свойство scrollSpeed.

webix.ui({
    view:"list",
    scrollSpeed:"100ms",
    // ...
});

2. Прокрутка к необходимому компоненту внутри scrollview.

В этом случае ID кнопки нужно связать с ID ряда в scrollview:

{ view:"button", value: "Verse 1", id: "1", click:scroll},
{ view:"button", value: "Verse 2", id: "2", click:scroll},

Метод showView() задаёт "фокус" элемнту в scrollview с соответсвующим ID.

webix.ui({
    view:"scrollview", 
    id:"verses", 
    body:{
       rows:[
           { id:"verse_1", template:"...Some long text"},
           { id:"verse_2", template:"...Some long text"}
       ]
});
 
function scroll(id){
    $$("verses").showView("verse_"+id);
}

Related sample:  Scrollview

3. Показать определённый элемент по его ID:

$$("mylist").showItem(5); // список должен быть прокручиваемый

Related sample:  Horizontal List

Внутри Datatable прокрутка осуществляется с помощью следующих методов:

• showItem(rowId) - прокрутка к определённому ряду по его ID;
• showItemByIndex(rowIndex) - прокрутка к определённому ряду по индексу элемента;
• showCell(rowID, cellID) - прокрутка к определённой ячейке (для вертикального и горизонтального режимов).

Как указать позицию прокрутки

Позиция определяется тем, как далеко пользователь прокрутил содержимое от его верхней и левой изначальных точек. Если указана только горизонтальная или вертикальная полоса прокрутки, позиция включает в себя только значение X или Y соответственно.

С помощью метода getScrollState() можно получить текущую позицию прокрутки:

var scPos = $$("mylist").getScrollState(); // возвращает данные в виде ({x:30,y:200})
var posx = scPos.x; // 30
var posy = scPos.y; // 200

Пользовательская прокрутка Webix

Webix предлагает свои полосы прокрутки вместо нативных полос бразуера. Преимущества полос прокрутки от Webix:

• аккуратный и изящный дизайн (тонкая полупрозрачная полоска) ;
• полосы скрыты по умолчанию и показываются только тогда, когда пользователь прокручивает страницу/компонент.

Related sample:  Custom Scroll

Эта особенность доступна из модуля CustomScroll, который нужно активировать перез использованием.

Убедитесь, что обернули код в функцию webix.ready(), которая срабатывает после загрузки страницы:

webix.ready(function(){
    // активируем CustomScroll
    webix.CustomScroll.init();
 
    // ваше приложение на Webix
    webix.ui({
        // ...
    });
});

Пользовательская прокрутка и iframes

Custom scroll не будет работать, если в вашем лейауте есть iframe и колесо мыши начинает крутиться непосредственно над ним. Это происходит потому, что iframe не посылает событий родительскому окну, а Custom scroll слушает события мыши (в т.ч. mousewheel) и не может без них работать.

Вариант решения этой проблемы - немного изменить код iframe так, чтобы он создавал событие для страницы-родителя:

document.onmousewheel = e => window.parent.postMessage({ type: "wheel", delta: e.wheelDelta });

В таком случае родитель сможет обработать его и создать соответствующее событие для компонента с Custom scroll:

window.addEventListener("message", message => {
    if (typeof message.data == "object" && message.data.type == "wheel") {
        const evt = document.createEvent("MouseEvents");
        evt.initEvent("mousewheel", true, true);
        evt.wheelDelta = message.data.delta;
        $$("scrollview").$view.dispatchEvent(evt);
    }
}, false);

Наверх