Blogger:IE8で背景の色が消える問題(3)モバイルサイト有効にせざるを得ないという事情でモバイルサイトを復活することにしました。しばらくモバイルサイトのカスタマイズをします。
横にフリックでページが移動してしまう
早速モバイルサイトをiOS Safariで確認すると、SyntaxHighlighter+fleXcrollも表示されています。
ところがコードを横スクロールさせようと横にフリックすると、高頻度で次の投稿に移動してしまいます。
Bloggerのモバイルテンプレートではご丁寧に横フリックでページを移動できる機能がついているそうです。
こんな機能はいらない、と思って無効にする方法をさがしたところありました。
Bloggerでモバイル閲覧時のスワイプによるページ切り替えを無効にする
横フリックがページの移動することを無効にする
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!-- 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 --> |
7行目の()は消し忘れかしら、と思って削除してみたら横フリックが有効になってしまいましたのでこれも必要です。
JavaScriptの無名関数を即時実行する書式だそうです。
1 2 3 4 5 |
<style> #spinner-canvas {display: none !important;} #left-arrow {display: none !important;} #right-arrow {display: none !important;}</style> |
参考にしたサイト
KYAN BASE: Bloggerモバイルテンプレート フリック無効化のやり方
最初はここを見つけました。
Bloggerでモバイル閲覧時のスワイプによるページ切り替えを無効にする
こちらの方法を採用させていただきました。
[JavaScript] 猿でもわかるクロージャ超入門 ３ 無名関数 - DQNEO起業日記
JavaScriptの無名関数を即時実行する書式について段階的に解説されています。
0 件のコメント:
コメントを投稿