てきとうな説明でてきとうに作ろう

jQuery Mousewheel

サンプル

別窓

概要

公式
横スクロールが進化します。
featherlightを作ってて、これ縦書きの小説サイトなんかで使ったらかっこいいだろと思って縦書きのページを作ったんですが、マウスホイールって通常縦にしかスクロールしないじゃないですか。なんか不便だなと思って。
それでマウススクロールで横方向にスクロールしたら便利だろうと思って導入しました。
サンプルでは、マウスで下にスクロールすると左へスクロールし、上にスクロールすれば右へスクロールします。
また、サンプルページ下部の左右矢印のボタンを押すと画面サイズの幅のぶんだけその方向へスクロールします。
数字のスピンボックスでは、指定した場所へ移動します。
サンプルではテキトーに設定していますが、目次のように機能させれば読み手にとって便利じゃないかなと。

縦スクロールを横スクロールにするのはコピペでできますが、左右移動や指定場所への移動はボタンなどの操作の為、スクリプトをいじることになるので多少難しいかもしれません。

2019.06


やりかた

まずは公式サイト開いてすぐのDOWNLOADボタンを押してjquery-mousewheel-master.zipを手に入れ、解凍しましょう。


フォルダ内の「jquery.mousewheel.js」のみを自サイトの場所へコピーします。

少し複雑なので、コードを全て貼って上から順に説明していこうと思います。
必要な部分だけ使ってください。

ソースを展開

<script>は</body>直前に置くとはやくなるらしいですが、気にする人がやればいいでしょう。


まず、2～4行目はjsファイルとcssファイルの読み込み部になります。
2行目はWebアイコンフォントを読み込んでいます。左右矢印ボタンで使用しています。不要な方は削除してください。
3、4行目はjQuery Mousewheelに必要なので忘れずに。ファイルの場所は移動させたところにかきかえてください。


6～50行目がcssをhtmlの中で書いちゃった部分です。コンセプト的にこう書いてるだけです。
cssファイルにして呼び出しもできる人はそうしてもいいししなくてもいいです。

7～28行目は縦書きのcss設定です。
縦書きについてはpixiv小説のように小説を表示する方法まとめ|I'll be NET さんのコピペです。
サンプルとして使っただけなので、べつに縦書きはいらないという方は削除してください。
画像などのコンテンツを横並びにして横スクロールさせるようなデザインにしたいというのもかっこいいと思います。

30～48行目はページ指定移動のスピンボックス（数字を上下できるやつ）と左右矢印処理のボタンのcssです。
31～33行目は、このボタン類の配置処理です。縦書きでfloatを設定しているため、普通に配置するとどうしてもボタン類が縦書きの右に配置されてしまうため、それを解除するためにやっています。
違う場所にしたい方は変えてください。149～186行目がbody内のボタン類です。
そもそもページ指定移動も左右矢印処理のボタンも不要な方は削除してください。
34～47行目は左右矢印ボタンのcss処理です。カーソルを乗せるとピンクになってかわいい処理です。
こちらも違うボタンにしたい方は適宜いじって、または左右矢印処理のボタンが不要な方は削除してください。


51行目～114行目が横スクロール関係の動作処理です。
先ほどと同様にjavascriptをhtmlの中で書いちゃった部分のため、jsファイルにして呼び出しもできる人はそうしてもいいししなくてもいいです。

54～65行目が縦スクロールを横スクロールに変換させる処理です。
56行目で移動速度を設定しています。スクロールをもっと早く、または遅くしたい方は数値を変えてください。

67～83行目がページ指定のスピンボックス操作時の移動処理です。
71行目は、スピンボックスの範囲外の時に動作しないようにしていますので、最小値、最大値を書き換えてください。サンプルと同じく1～14になっています。

85～99行目が左右矢印ボタンを押したときの移動処理です。<a>タグで「href="#"」としているところがクリックされたときに発動します。
88行目で移動幅を設定しています。movにお好きな移動幅を設定してください。自分は割合が好きなのでサンプルでは画面サイズの70%です。

54～65行目、67～83行目、85～99行目は不要なところは削除してかまいませんが、
101～110行目はページ指定移動処理と左右矢印処理での共通処理となっていますので、どちらかが必要な方は消さないでください。


118～147行目が横スクロールさせるコンテンツの部分です。
具体的には119行目、「id="honbun" class="mincho"」と設定したdivで囲まれた部分です。
ページ指定移動をしたい方は、123行目、132行目のように、「id="p1"」「id="p2"」・・・のように番号をふっておきます。


149～166行目がページ指定移動のスピンボックスと左右矢印処理のボタンです。

152～154行目がページ指定移動のスピンボックスです。
maxの値は、コンテンツの部分で「id="pXX"」とふった番号の最大値に書き換えてください。
サンプルではテキトーにスピンボックスで紹介しましたが、目次やメニューとして普通にリンクを貼ってもいいと思います。
アレンジとして後にいくつか例を記述しておこうと思います。

156～163行目が左右矢印のボタンです。
矢印のアイコンに「href="#"」とリンクを貼っています。 アイコンにはWebアイコンフォントを使用しています。他のがいい方は変えてください。

どちらも不要であればその部分を削除してください。


指定移動アレンジ

スピンボックスがダサい！！！！！などの理由で他のにしたいけどそうするとどうすればいいの？となるといけないので、アレンジできるように指定移動の部分を説明しておきます。
クリック元に<a href="#p1" >というかんじで飛びたい番号を直接書いてリンクを貼ります。

    <div class="text_link_btn">
        <a class="text_link" href="#p1" >何は今かく</a><br>
        <a class="text_link" href="#p2" >たったごお尋ねに</a><br>
        <a class="text_link" href="#p13" >それから間接のものへしたから</a><br>
    </div>

こんなかんじです。サンプルの文章では14個アンカーをふっていますがめんどくさいのでこれだけ…
aタグにclassをいれていますが、左右ボタンを設置しない人ならclassはなくても大丈夫です。
というのも、スクリプトの方で左右ボタンの処理と同じ個所を通るのでclassがないとエラーになってしまうので。
これだけでもちゃんと指定個所に飛んでくれますが、スクロールアニメーションがないのでｽﾝｯて飛びます。 アニメーションを付けたい方は次のようにスクリプトを編集します。先ほどのコードの87～98行目、

        $('a[href^="#"]').click(function() {
            var mov = window.innerWidth * 0.7;// 画面サイズの70%移動
            if($(this).attr("class").indexOf("right") >= 0){
                //右へ移動
                smoothScroll('div.mincho', mov);
            }
            else{
                //左へ移動
                smoothScroll('div.mincho', -mov);
            }
            return false;
        });

この部分を変更します。

        $('a[href^="#"]').click(function() {
            var mov = window.innerWidth * 0.7;// 画面サイズの70%移動
            if($(this).attr("class").indexOf("right") >= 0){
                //右へ移動
                smoothScroll('div.mincho', mov);
            }
            else if($(this).attr("class").indexOf("left") >= 0){
                //左へ移動
                smoothScroll('div.mincho', -mov);
            }
            else{
                //アンカーへ移動
                var href= $(this).attr("href");
                var target = $(href == "#" || href == "" ? 'html' : href);
                var position = target.offset().left;
                var position_width = document.getElementById(href.replace("#", "")).getBoundingClientRect().width;
                var mov = position + position_width - document.getElementById("honbun").getBoundingClientRect().width;
                smoothScroll('div.mincho', mov);
            }
            return false;
        });

7行目以降が変わっています。
簡単に説明すると、hrefの先頭に#がつくリンクをクリックしたとき、右ボタンでも左ボタンでもない場合に指定場所へアニメーションでスクロールするよってだけです。
左右ボタンが不要な方は判定はざっくり削除してしまって以下のようになります。 

        $('a[href^="#"]').click(function() {
            //アンカーへ移動
            var href= $(this).attr("href");
            var target = $(href == "#" || href == "" ? 'html' : href);
            var position = target.offset().left;
            var position_width = document.getElementById(href.replace("#", "")).getBoundingClientRect().width;
            var mov = position + position_width - document.getElementById("honbun").getBoundingClientRect().width;
            smoothScroll('div.mincho', mov);
            return false;
        });

これのサンプルはこちらになります。
アンカー14個作るのが面倒で●を14個スクリプトで作っちゃうやつも作りましたが、こんなに数あると微妙やなと思いましたので省略しときます。
気になる人はソースを参考にしてください。

inserted by FC2 system