電子書籍のサンプル表示を縦書きで表示させた時に横スクロールとなる。これをせめてページ送りっぽく移動するようにしたので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%と長いものもページ送りならストレスは少ない