Create a ScrollView

In this example, we’ll use the ScrollView as a viewport to move around a large background image. Dragging the screen moves the map until it reaches the edge of the scroll bounds.

import ui.ScrollView as ScrollView;
import ui.ImageView as ImageView;
import ui.resource.Image as Image;

var backgroundImage = new Image({url: "resources/images/europemap.png"});

Class: Application

exports = Class(GC.Application, function () {

	this.launchUI = function () {
		var scrollView = new ScrollView({
			superview: this.view,
			scrollBounds: {
				minX: 0,
				maxX: backgroundImage.getWidth(), //=> 916 px
				minY: 0,
				maxY: backgroundImage.getHeight() //=> 672 px
			},
			x: 0,
			y: 0,
			width: this.style.width,
			height: this.style.height
		});

		var imageView = new ImageView({
			superview: scrollView,
			image: backgroundImage,
			width: backgroundImage.getWidth(),
			height: backgroundImage.getHeight()
		});
	};
});

The output of this demo should look like this: scrollview screenshot