ScrollView

API Reference

Overview

ScrollView inherits from view and makes any of the nested components scrollable, either in horizontal or in vertical mode. It is handy in case of long homogeneous data items, like text templates.

Initialization

It's reasonable to use the ScrollView just as a scrolling container while text is stored in 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>
...

Then you can put these 'long articles' into the ScrollView and form a very long list, where you can scroll to any article you wish: HTML content is nested into UI component with the help of a dedicated data template:

webix.ui({
    view:"scrollview",
    id:"verses",
    scroll:"y", // vertical scrolling
    body:{
        rows:[
            {id:"verse_1", template:"html->my_box1"}, // corresponds to the div ID
            {id:"verse_2", template:"html->my_box2"}
            {...}
        ]
    }
});

Related sample:  Scrollview

ScrollView features a body object property where items (text templates, components) are stored in either rows or cols array for vertical or horizontal item arrangement respectively.

Working with ScrollView

Within ScrollView (as well as within any component with a scrollbar) you can:

  • scroll to a definite position of the component;
  • define your position - how far you have scrolled away from the top and left border of the ScrollView;
  • enable and disable scrolling and specify scrolling directions.

Read more about scroll control in the corresponding article of the documentation.

Related Articles

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