[Titanium Mobile] WebView内のScrollを無効（Disable）にする

投稿日：

titanium_webview_scroll-rockWebViewを画面の中に組み込んでクリックは有効にしたいけど、スクロールは無効するTips。

環境： Titanium SDK 2.1.4

「scrollable」は効かなかった。「disableBounce」だけではダメ。「touchEnabled」はClickも無効になってしまう。

Official Forumではhtml内に

document.ontouchmove = function(event){ event.preventDefault(); }

を記述する方法があるけど、親の画面のスクロールまで無効にしてしまう。

そこで、辿り着いたのがhtmlのCSSに

html, body {overflow:hidden;}

を記述する。これで大丈夫そう。

Sample Code

var html = [];
html.push('<!DOCTYPE html>');
html.push('<html>');
html.push('<head>');
html.push('<style>');
html.push(' html, body {overflow:hidden;}');
html.push('</style>');
html.push('</head>');
html.push('<body>');
html.push(content);
html.push('</body>');
html.push('</html>');

var view = Titanium.UI.createWebView({
    html: html.join(''),
    disableBounce: true,
    width: Titanium.UI.FILL,
    height: Titanium.UI.SIZE
});

 

WebViewのheightをコンテンツのサイズに合わせるのは前の記事を参照。

 

< Related Posts >