5 ScrollView is a container where the actors inside it can be scrolled manually
6 (via touch or pan gesture) or automatically.
8 By default, ScrollView can scroll to any position both horizontally and
9 vertically and no snapping is enabled.
11 Scroll mode can be specified to define how ScrollView should handle scrolling
12 in X and Y axes respectively (i.e. whether scrolling is enabled horizontally
13 or vertically, how scrolling is snapped, and the boundary to prevent ScrollView
14 to scroll beyond a certain position in the axes).
16 ![ ](../assets/img/scroll-view/scroll-view.png)
18 ### Example of creating a ScrollView
21 // Create a scroll view
22 var scrollView = new dali.Control("ScrollView");
23 var stageSize = dali.stage.getSize();
24 scrollView.size = [stageSize.x, stageSize.y, 0.0];
25 scrollView.parentOrigin = dali.CENTER;
26 scrollView.anchorPoint = dali.CENTER;
28 dali.stage.add( scrollView );
30 // Add actors to a scroll view with 3 pages
33 for(var pageRow = 0; pageRow < pageRows; pageRow++)
35 for(var pageColumn = 0; pageColumn < pageColumns; pageColumn++)
37 var pageActor = new dali.Control();
38 pageActor.widthResizePolicy = "FILL_TO_PARENT";
39 pageActor.heightResizePolicy = "FILL_TO_PARENT";
40 pageActor.parentOrigin = dali.CENTER;
41 pageActor.anchorPoint = dali.CENTER;
42 pageActor.position = [pageColumn * stageSize.x, pageRow * stageSize.y, 0.0];
43 pageActor.name = "pageActor" + pageColumn;
45 // Add images in a 3x4 grid layout for each page
49 var imageSize = [(stageSize.x / imageColumns) - margin, (stageSize.y / imageRows) - margin, 0.0];
51 for(var row = 0; row < imageRows; row++)
53 for(var column = 0; column < imageColumns;column++)
55 var imageView = new dali.Control("ImageView");
56 var imageId = row * imageColumns + column;
57 imageView.image = "./image-" + imageId + ".jpg";
58 imageView.parentOrigin = dali.CENTER;
59 imageView.anchorPoint = dali.CENTER;
60 imageView.size = imageSize;
61 imageView.position = [ margin * 0.5 + (imageSize[0] + margin) * column - stageSize.x * 0.5 + imageSize[0] * 0.5,
62 margin * 0.5 + (imageSize[1] + margin) * row - stageSize.y * 0.5 + imageSize[1] * 0.5,
64 pageActor.add(imageView);
65 var position = imageView.position;
69 scrollView.add( pageActor );
73 // Set scroll view to have 3 pages in X axis and allow page snapping,
74 // and also disable scrolling in Y axis.
76 xAxisScrollEnabled : true,
77 xAxisSnapToInterval : stageSize.x, // Define the snap points
78 xAxisScrollBoundary : stageSize.x * pageColumns, // i.e. Define 3 pages
79 yAxisScrollEnabled : false
82 scrollView.setScrollMode(scrollMode);