余韻を残してスクロールするようにするjQueryプラグイン-NiceScroll

スクロールする時に少し余韻を残してスクロールするようにするjQueryのプラグインです。ページ全体だけでなく、ページの一部にのみ使う事も可能です。最新記事のボックスなどに使ってみたいと思いました。

(!ご注意:こちらの記事では記事を書いた当時の使用方法をご紹介しております。現在の使い方などとは違っておりますので、ご使用の際はプラグイン配布元の使用方法をご参考いただくことをおすすめします。)

divだけでなくフレームにも対応しています。
jQueryプラグイン-NiceScroll

配布先とデモ

配布先:inuyaksa / jquery.nicescroll
上の方の”zip”というボタンをクリックでデモファイルも入った一式のセットがダウンロードできます。jquery.nicescroll.jsの項目かjquery.nicescroll.min.jsの項目でスクリプトのみのダウンロードができます。

使用方法

ヘッド内で下記のようにjQuery本体とプラグインの読み込みをします。

<script src="jquery.js"></script>
<script src="jquery.nicescroll.min.js"></script>

■ページ全体に使用する場合は続けてヘッド内に下記のように記入します。

<script>
$(document).ready(
  function() {  
    $("body").niceScroll();
  }
);
</script>

■部分的に使用する場合は続けてヘッド内に下記のように記入します。

<script>
$(document).ready(
  function() {  
    $("#適用する要素").niceScroll();
  }
);
</script>

■部分的に使用し、スクロールバーの色を変更する場合は続けてヘッド内に下記のように記入します。

<script>
$(document).ready(
  function() {  
    $("#適用する要素").niceScroll({cursorcolor:"#00F"});
  }
);
</script>

オプション

オプションを設定してスクロールバーのデザインやスクロールのスピード等を変更できます。
※グーグル翻訳でなんとなく意訳していますので間違いがあるかもしれません。詳細は配布サイトをご参照下さい。

. cursorcolor
スクロールバーの色の変更デフォルトは “#000000”

. cursoropacitymin
スクロールバーが非アクティブの場合の不透明度。デフォルトは非表示

. cursoropacitymax
スクロールバーがアクティブな場合の不透明度。デフォルトは完全な不透明

. cursorwidth
スクロールバーの幅。デフォルトは5

. cursorborder
スクロールバーのボーダーのcssの指定。デフォルトは “1px solid #fff”

. cursorborderradius
スクロールバーの角丸半径。デフォルトは”4px”

. zindex – change
スクロールバーのdivのz-indexの値。デフォルト値は9999

. scrollspeed
スクロールスピード。デフォルト値は60

. mousescrollstep
マウスホイールのスクロール速度。デフォルト値は48

. touchbehavior
デスクトップコンピュータでタッチデバイスのようなスクロール。デフォルトは false

. hwacceleration
スクロールを加速、デフォルトはtrue

. boxzoom
ボックスのコンテンツのズームを可能にする。デフォルトはfalse

. dblclickzoom
boxzoom=trueの時のみ設定可能。ボックス上でダブルクリックする。

. gesturezoom
boxzoom=truの時とタッチでバイスの場合設定可能。アクティブにズーム、デフォルトはtrueです。

. grabcursorenabled
touchbehavior = trueの場合に”grab”アイコンを表示。デフォルトはtrue

. autohidemode
スクロールバーの非表示の仕方

. background
cssの背景を変更できる。デフォルトは空

. iframeautoresize
フレームを読み込んだ時にリサイズする。デフォルトはtrue

. cursorminheight
スクロールバーの最小の高さを設定。デフォルトは20px

Related Article

6 Comments & Tracbacks

  • いちご大福 2015-10-11 1:22 AM

    はじめまして。
    jquery初心者なのですが、NiceScrollを実装したく、こちらのページを参考にさせていただいてました!
    div要素へのスクロールは何の問題もなく出来たのですが、iframeに思うように反映されず、今回相談させていただきます。

    デモと同じように、iframeにid属性でoverflow: hidden;を付けているのですが、それがうまく反映されていないのか、boxframeにかけているスクロールバーと重なって2つ表示されてしまいます。。。
    boxframeにかけているスクロールバーがheightめいいっぱいの長さなのも気になるのですが。。

    直接ソースを見て頂いているわけではないのでわかりにくいかとは思うのですが、iframeに使う際気をつけることや、自分では気付けていない間違いが少しでもわかれば、と思いコメントさせていただきました。
    ご返信いただけましたら幸いです。よろしくお願いいたします!

    Reply

    • saori 2015-10-11 12:43 PM

      いちご大福 さま

      はじめまして。この記事では、記事を書いた時(4年前)の使い方をご紹介しています。
      こちらのプラグインはその後何度もアップデートされ使用方法やオプションなども変わっているようです…、

      現在の demo のソースコードをみると、iframe には以下の CSS が適用されています。(jquery.nicescroll/index.html at master · inuyaksa/jquery.nicescroll

      #boxframe {
      	position:absolute;
      	top:28px;
      	left:420px;
      	width:400px;
      	height:300px;
      	overflow:auto;
      	border: 2px solid #0F0;
      }
      

      こちらを参考に実装されてみてはいかがでしょうか。
      使用方法なども配布先に掲載されているものをご参考いただいたほうがよさそうです。
      配布先:inuyaksa/jquery.nicescroll

      古い記事を掲載しており、紛らわしかったですね。こちらの記事には注意書きを追記しておきます。
      よろしくお願いいたします。

      Reply

      • いちご大福 2015-10-12 2:48 AM

        Saori様

        お返事ありがとうございます!
        現在配布されているもののdemoを見た際、私のPCではiframeを使用したものだけ
        NiceScrollが適用されていない、通常のスクロールバーで表示されてしまっていたので、
        なにかコツがあるのかと思い、きちんと表示されるこちらの記事を参考にさせていただいておりました。

        昔の記事と知りつつこのような質問をしてしまい、返って気を遣わせてしまって申し訳ありませんでした。。

        現在のdemoを参考にしたところ、重なりはしなくなったものの、やはり通常のスクロールバーで表示されてしまうので、他の方法を探したほうがいいのかもですね;;;

        お返事いただけて嬉しかったです。ありがとうございました〜!

        Reply

        • saori 2015-10-12 12:53 PM

          いちご大福 さま

          こんにちは。それならよかったですが、私の環境では iframe にも普通に NiceScroll が適用されているので、もしかしたらいちご大福さんのブラウザに入れている、拡張機能やアドオンなどと干渉したりしているかもですね…、一度そういったものを切って、キャッシュクリアしてみるとよいかもしれませんね…。
          あとは、ローカル環境からどこかのサーバーにアップしてみると適用されるとか…??うーん、そんなところでしょうか。

          Reply

          • いちご大福 2015-10-12 10:58 PM

            saori様

            ご返信ありがとうございます。
            私のPCの見え方に問題があったのですね…!
            きちんと見えるようになるならこのプラグインのまま利用したいものです…!!

            なんだか希望が見えてきました。笑
            本当に無知なもので、教えていただいて感謝です。
            きちんと見えるように、色々試してみます!

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル コンテンツ スライドショー jQueryプラグイン php 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS