Android 2.x 系では CSS で overflow: scroll; 指定を行っても hidden 扱いになってしまう、という不具合(仕様？)があります。この問題に対し Javascript を用いてスクロール制御を行います。

以下は Haxe を利用した簡単なサンプルです。スクロールさせたい要素を OverflowScrollHack クラスのコンストラクタ引数に指定します。現在 Haxe の JQuery用 Event クラスには originalEvent が定義されていないようなので、untyped を利用しています。

import js.html.TouchEvent;
import jQuery.Event;
import jQuery.JQuery;

class OverflowScrollHack{

	private var touchStartY:Int;

	public function new(element:JQuery, preventDefault:Bool = false){

		var userAgent = UserAgent.create();
		if(!userAgent.isAndroid() || userAgent.getAndroidVersion() >= 3) return;

		element.on("touchstart", function(event:Event){

			var touchEvent:TouchEvent = untyped event.originalEvent;
			touchStartY = touchEvent.touches[0].pageY + element.scrollTop();
		});

		element.on("touchmove", function(event:Event){

			if(preventDefault)
				event.preventDefault();

			var touchEvent:TouchEvent = untyped event.originalEvent;
			element.scrollTop(touchStartY - touchEvent.touches[0].pageY);
		});
	}
}

モバイル 端末・バージョン判定用クラス

class UserAgent {

	public static inline var ANDROID = "Android";
	private var userAgentString:String;

	public static function create(){

		var userAgent = null;

		#if js
		userAgent = new UserAgent(js.Browser.navigator.userAgent);
		#end

		return userAgent;
	}

	public function new(userAgentString:String){
		this.userAgentString = userAgentString;
	}
	public function isDocomo():Bool{
		return ~/^DoCoMo/.match(userAgentString);
	}
	public function isSoftbank():Bool{
		return ~/^J-PHONE|^Vodafone|^SoftBank/.match(userAgentString);
	}
	public function isAu():Bool{
		return ~/^UP.Browser|^KDDI/.match(userAgentString);
	}

	public function isAndroid():Bool{
		return ~/Android/.match(userAgentString);
	}
	public function isIPhone():Bool{
		return ~/iPhone/.match(userAgentString);
	}
	public function isIPod():Bool{
		return ~/iPod/.match(userAgentString);
	}
	public function isIPad():Bool{
		return ~/iPad/.match(userAgentString);
	}

	public function isSmartPhone():Bool{
		return isAndroid() || isIPhone() || isIPod();
	}

	public function getAndroidVersion():Float{

		return Std.parseFloat(userAgentString.substr(
			userAgentString.indexOf(ANDROID) + '$ANDROID '.length, "*.*".length));
	}
}

[ FLASH ] [ tips ] 投稿者 siratama : 2014年01月22日 22:16