Webix provides extensive scrolling management tools.
By default, Webix uses native browser scrollbars. In Webix Pro edition custom Webix-made scrollbars are available.
By default, component features vertical scrolling. It can be modified via the dedicated scroll property that may take the following values:
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.
With dynamic loading, only part of the stored records are loaded into the component during init. Each time you scroll down/up the component, a data request is sent to server to load the next portion of data.
Read more about dynamic loading.
If the dataset if too long (e.g. a collection of verses) it seems nice to have an 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 horizontal and vertical position of the necessary line into it. If you state this position as button's ID, 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 as set time for the scrollTo() function to perform.
webix.ui({
view:"mylist",
scrollSpeed:"100ms",
...
})
2 .Scrolling via focusing on the necessary view withtin 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() set 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);
}
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:
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
The feature is available in Webix Pro edition only.
Webix offers custom scrollbars to replace native browser ones. The advantages are as follows:
The feature is provided by a separate CustomScroll module that you need to enable before use.
Make sure you wrap everything into a 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