Added support for scrolling via scrollTop/scrollLeft.

Modified sv-test-02.html so that you can dynamically switch the scrolling method used. This will allow us to test the performance of different methods on the different platforms.

Modified scrollview.js so that you can specify @data-scroll-method="translate|position|scroll".

Author: jblas

experiments/scrollview/jquery.mobile.scrollview.js

@@ -18,7 +18,7 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
 		moveThreshold:     10,   // User must move this many pixels in any direction to trigger a scroll.
 		moveIntervalThreshold:     100,   // Time between mousemoves must not exceed this threshold.
 
-		useCSSTransform:   true,  // Use CSS "transform" property instead of "top" and "left" for positioning.
+		scrollMethod:      "translate",  // "translate", "position", "scroll"
 
 		startEventName:    "scrollstart",
 		updateEventName:   "scrollupdate",
@@ -46,16 +46,22 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
 		}
 		this._$view = $child.addClass("ui-scrollview-view");
 
-		this._$clip.css("overflow", "hidden");
+		this._$clip.css("overflow", this.options.scrollMethod == "scroll" ? "scroll" : "hidden");
 		this._makePositioned(this._$clip);
 
 		this._$view.css("overflow", "hidden");
 
-		if (!this.options.useCSSTransform)
-		{
-			this._makePositioned(this._$view);
-			this._$view.css({ left: 0, top: 0 });
-		}
+		// Turn off our faux scrollbars if we are using native scrolling
+		// to position the view.
+
+		this.options.showScrollBars = this.options.scrollMethod == "scroll" ? false : this.options.showScrollBars;
+
+		// We really don't need this if we are using a translate transformation
+		// for scrolling. We set it just in case the user wants to switch methods
+		// on the fly.
+
+		this._makePositioned(this._$view);
+		this._$view.css({ left: 0, top: 0 });
 
 		this._sx = 0;
 		this._sy = 0;
@@ -164,35 +170,42 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
 
 		var $v = this._$view;
 
-		var uct = this.options.useCSSTransform;
+		var sm = this.options.scrollMethod;
 
-		if (uct)
-			setElementTransform($v, x + "px", y + "px");
-		else
-			$v.css({left: x + "px", top: y + "px"});
+		switch (sm)
+		{
+			case "translate":
+				setElementTransform($v, x + "px", y + "px");
+				break;
+			case "position":
+				$v.css({left: x + "px", top: y + "px"});
+				break;
+			case "scroll":
+				var c = this._$clip[0];
+				c.scrollLeft = -x;
+				c.scrollTop = -y;
+				break;
+		}
 
 		var $vsb = this._$vScrollBar;
 		var $hsb = this._$hScrollBar;
 
-		if ($vsb || $hsb)
+		if ($vsb)
 		{
-			if ($vsb)
-			{
-				var $sbt = $vsb.find(".ui-scrollbar-thumb");
-				if (uct)
-					setElementTransform($sbt, "0px", -y/$v.height() * $sbt.parent().height() + "px");
-				else
-					$sbt.css("top", -y/$v.height()*100 + "%");
-			}
-	
-			if ($hsb)
-			{
-				var $sbt = $hsb.find(".ui-scrollbar-thumb");
-				if (uct)
-					setElementTransform($sbt,  -x/$v.width() * $sbt.parent().width() + "px", "0px");
-				else
-					$sbt.css("left", -x/$v.width()*100 + "%");
-			}
+			var $sbt = $vsb.find(".ui-scrollbar-thumb");
+			if (sm == "translate")
+				setElementTransform($sbt, "0px", -y/$v.height() * $sbt.parent().height() + "px");
+			else
+				$sbt.css("top", -y/$v.height()*100 + "%");
+		}
+
+		if ($hsb)
+		{
+			var $sbt = $hsb.find(".ui-scrollbar-thumb");
+			if (sm == "translate")
+				setElementTransform($sbt,  -x/$v.width() * $sbt.parent().width() + "px", "0px");
+			else
+				$sbt.css("left", -x/$v.width()*100 + "%");
 		}
 	},
 
@@ -230,9 +243,9 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
 		this._timerID = setTimeout(tfunc, this._timerInterval);
 	},
 
-	_getScrollPosition: function(x, y)
+	getScrollPosition: function()
 	{
-		return { x: this._sx, y: this._sy };
+		return { x: -this._sx, y: -this._sy };
 	},
 
 	_getScrollHierarchy: function()

experiments/scrollview/scrollview.js

@@ -12,7 +12,16 @@ function ResizePageContentHeight(page)
 
 $("[data-role=page]").live("pageshow", function(event) {
 	var $page = $(this);
+
+	// For the demos that use this script, we want the content area of each
+	// page to be scrollable in the 'y' direction.
+
 	$page.find(".ui-content").attr("data-scroll", "y");
+
+	// This code that looks for [data-scroll] will eventually be folded
+	// into the jqm page processing code when scrollview support is "official"
+	// instead of "experimental".
+
 	$page.find("[data-scroll]:not(.ui-scrollview-clip)").each(function(){
 		var $this = $(this);
 		// XXX: Remove this check for ui-scrolllistview once we've
@@ -31,10 +40,18 @@ $("[data-role=page]").live("pageshow", function(event) {
 			if (paging)
 				opts.pagingEnabled = true;
 
+			var method = $this.data("scroll-method");
+			if (method)
+				opts.scrollMethod = method;
+
 			$this.scrollview(opts);
 		}
 	});
 
+	// For the demos, we want to make sure the page being shown has a content
+	// area that is sized to fit completely within the viewport. This should
+	// also handle the case where pages are loaded dynamically.
+
 	ResizePageContentHeight(event.target);
 });
 

experiments/scrollview/sv-test-02.html

@@ -48,6 +48,19 @@
 	});
 });
 
+function changeScrollMethod()
+{
+	var val = $("#s_method").val();
+	var $sv = $("#evtCatcher").scrollview("scrollTo", 0, 0);
+	if (val == "scroll") {
+		$sv.css("overflow", "scroll");
+	}
+	else {
+		$sv.css("overflow", "hidden");
+	}
+	$sv.data("scrollview").options.scrollMethod = val;
+}
+
 var cb_hd_pd,
     cb_hd_sp,
     cb_hm_pd,
@@ -61,12 +74,6 @@
 
 function getDummyEvent(o)
 {
-/*
-	var obj = new Object;
-	for (var k in o)
-		obj[k] = o[k];
-	return obj;
-*/
 	return { _pd: false, _sp: false, preventDefault: function(){ this._pd = true; }, stopPropagation: function(){ this._sp = true; }};
 }
 
@@ -116,6 +123,15 @@ <h1>Scroll View Events Test</h1>
       <div data-role="content">
     <h3>Test</h3>
     <p>This page wraps the _handleDragStart, _handleDragMove, and _handleDragStop events of the scrollview widget so that the checkboxes below can determine how the native event is treated. You can use this page to figure out what events need to be caught and what special treatment is necessary to prevent native scrolling. You can also test the effect of that treatment on form elements within the sample scrollview.</p>
+    <div data-role="fieldcontain">
+        <label for="s_method" class="select">Scrolling Method:</label>
+        <select name="s_method" id="s_method" onchange="changeScrollMethod();">
+            <option value="translate">CSS3 Transform/Translate</option>
+            <option value="position">CSS Top/Left Positioning</option>
+            <option value="scroll">scrollTop/scrollLeft</option>
+        </select>
+    </div>
+
     <div  data-role="fieldcontain">
           <fieldset data-role="controlgroup">
         <input type="checkbox" name="cb_hd_pd" id="cb_hd_pd" />