I'll be NET 】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

トップページ > JavaScript/jQuery > pixiv小説のように縦書き表示をした時の小説部分のスクロールを調整してみる。

pixiv小説のように縦書き表示をした時の小説部分のスクロールを調整してみる。

この記事で紹介したTipsは、現在使用できない可能性があります。
更新された情報は下記記事をご参照ください。
https://illbenet.jp/view/99

先日、pixiv小説のようにCSS3だけでHTMLを縦書き表示する方法を紹介しました。
上記記事を利用して、pixivのように小説で縦書き表示をしたとき、小説本文が長いと、下画像のように小説部分にスクロールバーが表示されます。

小説本文部分のスクロールバー

このような小説ブロック内で、マウスホイールでスクロールできるようにするには、jQueryを利用します。

サンプルはこちら

jQuery.nicescrollの改造版を利用する

マウスホイールによる左右スクロール、及びブラウザ標準のスクロールバーの変更はInuYaksa様jQuery.nicescroll改造したものを使用して実現しています(Thank you!)。

pixiv inside|pixiv小説縦書き機能 開発の裏側 ~横のものを縦にする~

を参考にすると、pixiv小説ではjQuery.nicescrollというjQueryプラグインの改造版を利用しているようです。

HTML例
<div id="honbun">
    <p>縦書きにしたい文章</p>
</div>
jQuery利用例

jQuery.nicescrollのダウンロード・改造方法を解説します。

  1. GitHubでjQuery.nicescrollをDLします。
    GitHubでjQuery.nicescroll
  2. ダウンロードしたファイルを解凍し、jquery.nicescroll.jsをエディタで開きます。
    jquery.nicescrollのフォルダ
  3. GitHubのInuYaksa様の改造例を参考に、jquery.nicescroll.jsを改造します。
    実際の改造コードはこちらに解説されています。
    具体的には、304行目を削除して
        // http://dev.w3.org/csswg/css-writing-modes-3/#logical-to-physical
        if (this.opt.rtlmode == "auto") {
          var target = this.win[0] == window ? this.body : this.win;
          var writingMode = target.css("writing-mode") || target.css("-webkit-writing-mode") || target.css("-ms-writing-mode") || target.css("-moz-writing-mode");
    
          if (writingMode == "horizontal-tb" || writingMode == "lr-tb") {
            this.isrtlmode = (target.css("direction") == "rtl");
          } else {
            this.isrtlmode = (writingMode == "vertical-rl" || writingMode == "tb-rl");
          }
        } else {
          this.isrtlmode = (this.opt.rtlmode === true);
        }
    
    を挿入し、2634行目の直上に
          // invert horizontal direction for rtl mode
          if (self.isrtlmode) px = -px;
    
    を挿入してください。
  4. headタグ内に下記のようにソースを記述します。
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript" src="./jquery.nicescroll.js"></script>
    <script type="text/javascript">
    $(document).ready(
        function() {
            $("#honbun").niceScroll({autohidemode:"cursor", smoothscroll:true, cursorcolor: "#999"});
        }
    );
    </script>
    
    jquery.nicescroll.jsを読み込めるようにパスを調整しておいてください。

以上のようにして、縦書きにした小説要素をマウスホイールでスクロールできるようになりました。
pixivのようにクリックでのページめくりを実装するには、また別のjQueryが必要です。

ページめくりを実装する方法は、また別の記事で解説しようと思います。

関連記事

記事移動

関連記事

HTML上の要素の位置を変更するjQuery

HTML上の要素の位置を変更するjQuery

JavaScriptで現在のURLを取得する方法

ロード時やスクロール時にふわっと表示させるjQuery

ロード時やスクロール時にふわっと表示させるjQuery

pixiv小説のように縦書き表示する方法-2019版

pixiv小説のように縦書き表示する方法-2019版

facebookページの投稿一覧をGraphAPIとjQuery(json)で表示してみる

jQueryで特定のパラメータの値を取得する関数

jQueryで特定のパラメータの値を取得する関数

Comment Form

  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)

ユーティリティ

創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)【I'll be NET】

プロフィール

author:I'll be NET

since:2014.01.01

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。

more

Feed