画像のようなレイアウトのWEBページを作成しており、iPadで利用したいと考えています。
このとき、
- タッチによるスクロールを、contentの部分だけ動作するようにしたい(headerや左右のエリアをtapを無効にしたい)
- contentエリア内部(画像最薄グレー)については、子要素についても、どの要素をタッチしてもスクロールを有効にしたい
と考えております。
iPadやiPhone特有の、画面外までスクロール出来てしまう動作を防ぎたいという意図があります。
以下のようなコードを試したのですが、どうしても、content内部に存在している子要素(<li>などが入っています)
までスクロールを有効化することができません。
ひとつひとつ、要素を指定するしかないでしょうか?
どなたかよい解決方法をご存知でしたら、ご教示いただけないでしょうか。
js
1// スクロールを抑止する関数 2function preventScroll(event) { 3 4 // contentエリアについて、タッチイベントを有効化 5 if (event.touches[0].target.className == "content") { 6 return; 7 } 8 9 // タッチイベントを抑止 10 event.preventDefault(); 11} 12 13// タッチイベントを全体で抑止する 14$(document).bind("touchmove", preventScroll, false);
どうぞよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/11 08:59