Intermediate

Scroll Control

Webix provides extensive scrolling management tools.

  • Firstly, Webix components are supplied with vertical and horizontal scrollbars, that can be shown and hidden with the help of the related API;
  • Secondly, scrolling in an application can be controlled with the help of common methods and properties;
  • Thirdly, Webix library features a separate component called scrollview, a container view with scrollbars for placing any content there (plain text, HTML, Webix views);

By default, Webix uses native browser scrollbars. In Webix Pro edition custom Webix-made scrollbars are available.

Tuning Scrolling

By default, a component features vertical scrolling. It can be modified via the dedicated scroll property that may take the following values:

  • "x" - sets a horizontal scrollbar;
  • "y" - sets a vertical scrollbar (default);
  • "xy" - sets both horizontal and vertical scrollbars;
  • false - defines a non-scrollable component.
webix.ui({
    view:"list",
    id:"mylist",
    scroll:"x", //"y", "xy", false
    ..//config
});

Some components feature such properties as scrollX and scrollY, that take boolean values to enable/disable the specified scrolling direction, so check a component's API Reference.

Scrolling and Dynamic Loading

With dynamic loading, only part of the stored records are loaded into the component during initialization. Each time you scroll down/up the component, a data request is sent to the server to load the next portion of data.

Read more about dynamic loading.

Scrolling to a definite position in the view

If the dataset is too long (e.g. a collection of verses), it seems nice to have the ability to scroll to a definite poem automatically with a click of a button.

Here you have several possibilities:

1 . Make use of the component's scrollTo(x,y) method:

The function is called from a scrollview object and takes the horizontal and vertical position of the necessary line into it. If you state this position as the ID of a button, the function will look like this:

function scroll(id){
    id=this.config.id * 1; // gets ID of the clicked button 
    $$("verses").scrollTo(0, id); // scrolls through the view with the specified ID 
}

Scroll position can be calculated during development state with the getScrollState() method that returns an object with X and Y parameters.

You can as well set the time for the scrollTo() function to perform.

webix.ui({
    view:"mylist",
    scrollSpeed:"100ms",
    ...
})

2 . Scrolling via focusing on the necessary view within the scrollview.

Here the button's ID should be connected to the ID of the row in the scrollview:

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

Then the showView() method sets focus to the scrollview item with the corresponding ID.

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

Related sample:  Scrollview

3 . Make the view show the definite item specified by its ID:

$$("mylist").showItem(5); // the list should be scrollable

Related sample:  Horizontal List

Within datatable scrolling via showing includes the following methods:

  • showItem(rowId) - scrolls to a definite row indicated by its ID;
  • showItemByIndex(rowIndex) - scrolls to a definite row defined by data item index in the data source;
  • showCell(rowID, cellID) - scrolls to a definite cell (both vertical and horizontal scrolling modes work).

Defining scroll position

Scroll state is defined as the combination of a top and left scroll position (how much is the component scrolled from its top and left border). In case you have either a horizontal or vertical scrollbar, the scroll state includes only one value - X or Y respectively.

Scroll position can be derived with the getScrollState() method to learn the current values:

var scPos = $$("mylist").getScrollState(); // returns data as ({x:30,y:200})
var posx = scPos.x; // 30
var posy = scPos.y; // 200

Webix Custom Scroll

The feature is available in Webix Pro edition only.

Webix offers custom scrollbars to replace native browser ones. The advantages are as follows:

  • thin grey semi-transparent bars feature neat design;
  • the bars are initially hidden and appear only when a scrolling movement is detected on the page (provided that scrolling is enabled).

Related sample:  Custom Scroll

The feature is provided by a separate CustomScroll module that you need to enable before use.

Make sure you wrap everything into the webix.ready() function, that is executed after page loading:

webix.ready(function(){
    // enabling CustomScroll
    if (!webix.env.touch && webix.ui.scrollSize)
        webix.CustomScroll.init();
 
    // your webix app
    webix.ui({
        ...
    });
});
Back to top