ティラノスクリプトにおけるスマホのスクロール問題について

こちらのブログではお久しぶりです。本当にこちらは放置気味になっていますが、最近ティラノスクリプトでの制作をはじめました。まあこのあたりは後日詳しく。

スマホのタッチ操作について

スマホだとティラノスクリプトのバックログやセーブ画面でスクロールできない問題です。

<body onselectstart="return false" onContextmenu="return false" ontouchmove="event.preventDefault()" >

ここの行のevent.preventDefault()が原因でスマホのタッチスクロールが無効化されているようです。

対策案

目的としては以下の通りです。

タッチ、スワイプ操作で画面が移動したりしないようにする（画面の固定）
かつバックログやセーブ画面でタッチスクロールができるようにする

※2020.03.17追記　動作が不確実な部分がありましたので、修正しました。index.htmlに直接記入する方法から、~~.ksファイルに記入する方法に切り替えています。これが多分一番楽。~~→外部jsに書き込んだほうが早い

※2021.04.29追記　更に修正しました。e.stopPropagation();を入れることで上部のノードとの衝突を避けています。4/9時点で動作確認していますので、今後ティラノ本体やブラウザ(Chrome)が更新されると動作保証できません。

コンフィグにレンジを実装してスマホでも動かしたい場合は、”.layer_menu”の部分を”.layer_menu, input[type=range]”と書き換えればティラノ内でレンジ操作ができるようになります。

※2021.08.28追記念の為外部jsに記述する時の正規表現を加えました。外部jsに書き出す場合この正規表現が無いと機能しません。シナリオファイル内の[iscript]〜[endscript]の中に書く場合は、下記サンプルの一行目と最終行は必要ありません。（$(“.layer_menu”)…から）

$(function(){
$(".layer_menu").on("touchmove",function(e){
    $("body").removeAttr('ontouchmove');
    e.stopPropagation();
  });
  $(".layer_menu").on("touchend",function(){
    $("body").attr('ontouchmove','event.preventDefault()');
  });
});

backlog.htmlなどが読み込まれるlayer_menuレイヤーがtouchmoveしている間は、タッチスクロール操作を有効に、touchendしたら再び無効化、というスクリプトです。

もっとスマートにやれる方法あるかな？私はこれが限界です。。。

スマホのタッチ操作について

対策案

共有:

関連