縦書き横スクロール

2014/4/28 [16:08:37] (月)

電子書籍のサンプル表示を縦書きで表示させた時に横スクロールとなる。これをせめてページ送りっぽく移動するようにしたのでjQueryというかjavascriptの今さらメモ。

細工なしの横スクロールは、マウスでスクロールバーを摘まんでスクロールさせるんだけど、ふにゃふにゃと今どこを読んでいるのかわかりにくいし、使いにくいだけでありえないUI。まいったなあ、と思ってあちこち見て回って検索。

あちこちに実例があった。
そりゃそうだよなあ。横スクロールの使いにくさは大昔から感じてたことで、ならば先人がすでに解決済みのはず。サイトまわってソースを表示させてjavascriptやcssを覗いて、jQueryのページを見てウチも（やっと）解決。感謝。

クリックで一画面ずつ横スクロールさせてページ送りっぽくなった。こっちの方が断然わかりやすくて使いやすい。
（以下は都合でidの「＃」を漢字表記。ほんとはシャープ記号）
$(function(){ $("#content").click(function(e){ var full = $("#content").width(); var pos = $("#content").offset(); var conx = ((e.pageX) - (pos.left)); var half = Math.round(full/2); var con_width = $(".sample").width(); if(half < conx){ var move = $("#content").scrollLeft(); move += full; move = move-60; if(move > con_width) move = con_width; } else{ var move = $("#content").scrollLeft(); move -= full; move = move+60; if(move < 0) move = 0; } $("#content").animate({scrollLeft:move}); }); });
・表示しているコンテナの幅を取得
・コンテナの中でクリックされたX位置を取得
・コンテナの半分の長さを取得
・サンプルの横幅を取得
・右半分で押された戻る
・左半分で押されたら進む

↓たとえばサンプルが本編の50〜60%と長いものもページ送りならストレスは少ない

» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」

»電子書籍制作代行についてはこちら