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
    height: 160, 
    width: 150,
    body:{
    rows:[
        { id:"verse_1", template:"html->my_box1" },//corresponds to the div ID
        { id:"verse_2", template:"html->my_box2" }
        // more templates
    ]   
 }
});

Main properties

  • scroll - (boolean/string) enables/disables the scroll bar. The property can have the following values:
    • "y" (or true) - enables vertical scroll (the default value);
    • "x" - enables horizontal scroll;
    • "xy" - enables both scrolls;
    • false - disables both scrolls.
  • height - (number) sets the height of the scrollview.
  • width - (number) sets the width of a widget.
  • body - (object) stores items (text templates, widgets) in either rows or cols array for vertical or horizontal arrangement, respectively.

Related sample:  Scrollview

Please note that for the scroll to appear, the internal element should be larger (wider or higher) than the scrollview inside of which it is placed. You can adjust the size of the internal element via its width/height/autoheight/autowidth properties.

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.