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, a 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", "auto", false
// ... config
});
Some components have the scrollX and scrollY properties that take boolean values to enable/disable the specified scrolling direction. Check the API Reference for details.
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.
If the dataset is too long, it seems nice to have the ability to scroll to a definite part automatically with a click of a button.
Here you have several possibilities:
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:
{ view:"scrollview", id:"verses", body:{/* content */} },
{
view:"button", value:"Imitation of Spenser", id: "130",
width:250, click:function(id){
$$("verses").scrollTo(0, id*1); // scrolls to the position at top:130px
}
}
Scroll position can be calculated during development state with the getScrollState() method that returns an object with X and Y parameters.
For touch devices you can also set the time for the scrollTo() function to perform. Define the scrollSpeed property value in milliseconds:
webix.ui({
view:"list",
scrollSpeed:"100ms",
...
});
Here the ID of a button should be connected to the ID of the row in the scrollview:
{ view:"button", value: "Verse 1", id: "1", click:scroll},
{ view:"button", value: "Verse 2", 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:"...Some long text"},
{ id:"verse_2", template:"...Some long text"}
]
}
});
function scroll(id){
$$("verses").showView("verse_"+id);
}
$$("mylist").showItem(5); // the list should be scrollable
Related sample: Horizontal List
Within Datatable scrolling can be done with 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.
The current scroll position can be derived with the getScrollState() method:
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 the webix.ready() function, that is executed after page loading:
webix.ready(function(){
// enabling CustomScroll
webix.CustomScroll.init();
// your webix app
webix.ui({
...
});
});
Custom scroll will not work if your layout has an iframe and the mouse wheel is turned while the pointer is over the iframe. This happens because iframes do not dispatch events to parent windows, and custom scroll relies on several mouse events, including mousewheel
.
A possible solution to this problem is modifying the iframe's code so it would create an event for the parent page:
document.onmousewheel = e => window.parent.postMessage({ type: "wheel", delta: e.wheelDelta });
Then the parent can process it and create a corresponding event for the component with 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);
Back to top