Blogger:モバイルサイト(1)横にフリックでページが移動することを無効にする

Blogger:IE8で背景の色が消える問題(3)モバイルサイト有効にせざるを得ないという事情でモバイルサイトを復活することにしました。しばらくモバイルサイトのカスタマイズをします。

横にフリックでページが移動してしまう

早速モバイルサイトをiOS Safariで確認すると、SyntaxHighlighter+fleXcrollも表示されています。

ところがコードを横スクロールさせようと横にフリックすると、高頻度で次の投稿に移動してしまいます。

Bloggerのモバイルテンプレートではご丁寧に横フリックでページを移動できる機能がついているそうです。

こんな機能はいらない、と思って無効にする方法をさがしたところありました。

Bloggerでモバイル閲覧時のスワイプによるページ切り替えを無効にする

横フリックがページの移動することを無効にする

<!-- No Swipe Mobile -->
<b:if cond='data:blog.isMobile'>
<script type='text/javascript'>
(function() {
  var c = document.getElementById("main");
  c.addEventListener = null;
})()
</script>
<style>
  #spinner-canvas {display: none !important;}
  #left-arrow {display: none !important;}
  #right-arrow {display: none !important;}
</style>
</b:if>
<!-- /END -->

これをテンプレートHTMLの</body>の上行に追加します。

7行目の()は消し忘れかしら、と思って削除してみたら横フリックが有効になってしまいましたのでこれも必要です。

JavaScriptの無名関数を即時実行する書式だそうです。

<style>
  #spinner-canvas {display: none !important;}
  #left-arrow {display: none !important;}
  #right-arrow {display: none !important;}
</style>

この部分を削ってみましたがいまのところiOS Safariで見る限り支障はないのでいらないのかもしれません。

参考にしたサイト

KYAN BASE: Bloggerモバイルテンプレート　フリック無効化のやり方
最初はここを見つけました。

Bloggerでモバイル閲覧時のスワイプによるページ切り替えを無効にする
こちらの方法を採用させていただきました。

[JavaScript]　猿でもわかるクロージャ超入門　３　無名関数 - DQNEO起業日記
JavaScriptの無名関数を即時実行する書式について段階的に解説されています。

次の関連記事:Blogger:モバイルサイト(2)引用符の枠がはみ出る問題