ひまつぶし雑記帖

doncha.net制作・発行:KindleやiBooks、楽天kobo、BOOK☆WALKERで読む電子書籍

縦書き横スクロール

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

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

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

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

クリックで一画面ずつ横スクロールさせてページ送りっぽくなった。こっちの方が断然わかりやすくて使いやすい。
(以下は都合でidの「#」を漢字表記。ほんとはシャープ記号)

・表示しているコンテナの幅を取得
・コンテナの中でクリックされたX位置を取得
・コンテナの半分の長さを取得
・サンプルの横幅を取得
・右半分で押された戻る
・左半分で押されたら進む

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

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

profile

profile

 
doncha.net
名前:
飯田哲章
mail:
t2aki@mrh.biglobe.ne.jp
twitter:
t2akii

WEBサービス制作/電子書籍制作

検索
<<2019/12>>
       
1234567
891011121314
15161718192021
22232425262728
293031

リンク

WINDOWS版サウンドノベル
おかえりください PC WINDOWS版サウンドノベル
『おかえりください』体験版

iPhone電子書籍アプリ
小説同人誌Select iPhone電子書籍アプリ
『小説同人誌Select』