CommentsPosted2011-12-10スクロールする時に少し余韻を残してスクロールするようにするjQueryのプラグインです。ページ全体だけでなく、ページの一部にのみ使う事も可能です。最新記事のボックスなどに使ってみたいと思いました。(!ご注意:こちらの記事では記事を書いた当時の使用方法をご紹介しております。現在の使い方などとは違っておりますので、ご使用の際はプラグイン配布元の使用方法をご参考いただくことをおすすめします。)divだけでなくフレームにも対応しています。jquery.nicescroll上の方の”zip”というボタンをクリックでデモファイルも入った一式のセットがダウンロードできます。jquery.nicescroll.jsの項目かjquery.nicescroll.min.jsの項目でスクリプトのみのダウンロードができます。使用方法ヘッド内で下記のようにjQuery本体とプラグインの読み込みをします。src="jquery.nicescroll.min.js"></script>■ページ全体に使用する場合は続けてヘッド内に下記のように記入します。});</script>■部分的に使用する場合は続けてヘッド内に下記のように記入します。});</script>■部分的に使用し、スクロールバーの色を変更する場合は続けてヘッド内に下記のように記入します。});</script>オプションオプションを設定してスクロールバーのデザインやスクロールのスピード等を変更できます。※グーグル翻訳でなんとなく意訳していますので間違いがあるかもしれません。詳細は配布サイトをご参照下さい。cursoropacityminスクロールバーが非アクティブの場合の不透明度。cursoropacitymaxスクロールバーがアクティブな場合の不透明度。cursorwidthスクロールバーの幅。cursorborderスクロールバーのボーダーのcssの指定。cursorborderradiusスクロールバーの角丸半径。changeスクロールバーのdivのz-indexの値。scrollspeedスクロールスピード。mousescrollstepマウスホイールのスクロール速度。touchbehaviorデスクトップコンピュータでタッチデバイスのようなスクロール。boxzoomボックスのコンテンツのズームを可能にする。dblclickzoomboxzoom=trueの時のみ設定可能。ボックス上でダブルクリックする。gesturezoomboxzoom=truの時とタッチでバイスの場合設定可能。アクティブにズーム、デフォルトはtrueです。trueの場合に”grab”アイコンを表示。backgroundcssの背景を変更できる。iframeautoresizeフレームを読み込んだ時にリサイズする。cursorminheightスクロールバーの最小の高さを設定。jquery初心者なのですが、NiceScrollを実装したく、こちらのページを参考にさせていただいてました!div要素へのスクロールは何の問題もなく出来たのですが、iframeに思うように反映されず、今回相談させていただきます。hidden;を付けているのですが、それがうまく反映されていないのか、boxframeにかけているスクロールバーと重なって2つ表示されてしまいます。boxframeにかけているスクロールバーがheightめいいっぱいの長さなのも気になるのですが。直接ソースを見て頂いているわけではないのでわかりにくいかとは思うのですが、iframeに使う際気をつけることや、自分では気付けていない間違いが少しでもわかれば、と思いコメントさせていただきました。ご返信いただけましたら幸いです。この記事では、記事を書いた時(4年前)の使い方をご紹介しています。#0F0;}こちらを参考に実装されてみてはいかがでしょうか。使用方法なども配布先に掲載されているものをご参考いただいたほうがよさそうです。配布先:inuyaksa/jquery.nicescroll古い記事を掲載しており、紛らわしかったですね。こちらの記事には注意書きを追記しておきます。AMSaori様お返事ありがとうございます!現在配布されているもののdemoを見た際、私のPCではiframeを使用したものだけNiceScrollが適用されていない、通常のスクロールバーで表示されてしまっていたので、なにかコツがあるのかと思い、きちんと表示されるこちらの記事を参考にさせていただいておりました。昔の記事と知りつつこのような質問をしてしまい、返って気を遣わせてしまって申し訳ありませんでした。現在のdemoを参考にしたところ、重なりはしなくなったものの、やはり通常のスクロールバーで表示されてしまうので、他の方法を探したほうがいいのかもですね;;;お返事いただけて嬉しかったです。適用されているので、もしかしたらいちご大福さんのブラウザに入れている、拡張機能やアドオンなどと干渉したりしているかもですね...、一度そういったものを切って、キャッシュクリアしてみるとよいかもしれませんね...。あとは、ローカル環境からどこかのサーバーにアップしてみると適用されるとか...??うーん、そんなところでしょうか。PMsaori様ご返信ありがとうございます。私のPCの見え方に問題があったのですね...!きちんと見えるようになるならこのプラグインのまま利用したいものです...!!なんだか希望が見えてきました。本当に無知なもので、教えていただいて感謝です。CommentコメントをキャンセルEmailは公開されません。*Website↑AuthorSaoriホームページを作っています。犬とインターネットが好きです。愛犬はダックスフンド。内容を確認後チェックして送信Socialブログ更新のお知らせとWeb制作に関する情報を更新しています。