[K] Bloggerユーザ・管理者必読！モバイルテンプレートのスワイプでのページ切り替えを無効化する方法 | けんけん.com
Bloggerユーザならよく見るであろう、スワイプによる自動ページ切り替えです。 一見便利そうなこの機能。実は弊害のほうが多い。 記事ページでは次の記事・前の記事、インデックスページでは次のインデックス・前のインデックスと勝手にページ切り替えされてしまいます。 しかもこのスワイプですが、ムダに精度が高すぎるというかスクロールが少し斜めになった程度でもスワイプと認識されるレベル。 相当意識してスクロールしないと記事を最後まで読むことなんてできません。 ...
ずっと気になっていた
昨日の朝、 @knk_n さんに教えていただいたので試してみました。
しかし、この方法では以下の問題があることがわかりました。
- PageList ウィジェットでページ遷移できなくなる。
- Disqus のコメントフォームが表示されなくなる。
window.addEventListener = null; としているため、
スワイプ以外のイベントにも反応しなくなっているのだと思います。
それは困るので、ハックしてみました。
モバイルテンプレートでスワイプによるページ遷移を無効にする方法【改】
全体の手順は
[K] Bloggerユーザ・管理者必読！モバイルテンプレートのスワイプでのページ切り替えを無効化する方法 | けんけん.com
変更点はテンプレートに追加するコードの内容と追加する位置です。
以下のコードを </body> の直前に追加します。
<!-- No Swipe Mobile -->
<b:if cond='data:blog.isMobile'>
<script type='text/javascript'>
//<![CDATA[
(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 -->
<b:if cond='data:blog.isMobile'>
<script type='text/javascript'>
//<![CDATA[
(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 -->
簡単な説明
windowではなく、#mainのaddEventListenerを無効(null)にします。
これによってスワイプによるページ遷移の発生を抑制します。- コードを
<head>ではなく<body>に追加するのは、#mainの要素がロードされてから実行されるようにするためであり、スワイプによるページ遷移を追加するコードも<body>の末尾に挿入されるのでこれで十分だと判断したためです。 <style>の部分は、スワイプ時に表示されるスピナー(？)を非表示にするための内容です。(#spinner-canvas は指定しなくてもよいような気もしますが)
Blogger ユーザの方はお試しいただき、不具合があればお教えいただければ幸いです。
Blogger が追加する JavaScript が minify されていてすごく読みにくかった。
0 コメント:
コメントを投稿