Odd behavior with ScrollableView

index.js

var interMediateStop = 3;
var _menuOptionWidth = 0;
var diamention = 0;


function onScrollCurrentPosition(e) {
	//$.dottedCurrentMarker.left = (e.currentPageAsFloat * _menuOptionWidth);
}

$.index.open();

index.tss

".container": {
	backgroundColor:"white",
	layout : "vertical"
}

"Label": {
	width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	color: "#000"
}
"#scrollableView": {
	width: Ti.UI.FILL,
	height: Ti.UI.SIZE,
	top : "30dip"
}

index.xml

<Alloy>
	<Window class="container">
		<View id="view1" pageId="1" backgroundColor="red" width="90%" height="Ti.UI.SIZE">
			<Label height="Ti.UI.SIZE">View 1</Label>
		</View>

		<ScrollableView id="scrollableView" onScroll="onScrollCurrentPosition">
			<View id="view1" pageId="1" backgroundColor="red" width="90%" height="100">
				<Label height="Ti.UI.SIZE">View 1</Label>
			</View>
			<View id="view2"  pageId="2" backgroundColor="green" width="90%" height="Ti.UI.SIZE">
				<Label>View 2</Label>
			</View>
			<View id="view3"  pageId="3" backgroundColor="blue" width="90%" height="Ti.UI.SIZE">
				<Label>View 3</Label>
			</View>
			<View id="view4"  pageId="4" backgroundColor="yellow" width="90%" height="Ti.UI.SIZE">
				<Label>View 4</Label>
			</View>
		</ScrollableView>
	</Window>
</Alloy>