ScrollView

• Methods, parameters and events
• Samples

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

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;
  • "auto" - enables scrollbars when they are needed (if the size of the content exceeds the size of the Scrollview container)
  • 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

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.

• Setting Borders to the Components
• Adding Headers to Components
• Sizing Components
• Resizing
• Layout
• MultiView
• Carousel
• Accordion