質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1224閲覧

jQueryプラグインのオプションが効かない原因

EXIT

総合スコア43

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1グッド

1クリップ

投稿2019/02/24 10:04

編集2019/02/24 10:46

Overlay ScrollbarsというjQueryプラグインを使おうと思っていますが、オプションがなぜか効きません。
(↑のページの Minimal と同じようにしたい = スクロール後にバーが消えるはずなのに消えない)

どうしてなのでしょうか? どこか間違っていたら教えてください。。

html

1<html lang="ja"> 2<head> 3 <meta charset="UTF-8"> 4 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <meta name="description" content="~"> 7 <title>~</title> 8 <link rel="icon" href="favicon.ico"> 9 <link rel="stylesheet" href="css/doctor.css"> 10 <link rel="stylesheet" href="css/styles.css"> 11 <link rel="stylesheet" type="text/css" href="slick/slick.css"/> 12 <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> 13 14<!-- ↓今回のjQueryプラグイン --> 15 <link type="text/css" href="osb/css/OverlayScrollbars.css" rel="stylesheet"/> 16 17</head> 18<body> 19~~~ 20 <script type="text/javascript" src="jquery-3.3.1.min.js"></script> 21 <script type="text/javascript" src="slick/slick.min.js"></script> 22 <script type="text/javascript" src="osb/js/jquery.overlayScrollbars.js"></script> 23 <script type="text/javascript" src="js/op-osb.js"></script> 24 <script type="text/javascript" src="js/op-slick.js"></script> 25</body> 26</html>

js

1$(function(){ 2$("body").overlayScrollbars({ 3 autoHide: "scroll", 4}); 5});
bochan2👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/02/24 10:29

これだけだと回答は無理ですよ。 きちんと再現できる情報をご提示ください。jQueryプラグインなのであればバージョンや「そもそもjQuery本体やプラグイン読み込みできてるのか」といった基本的なところから疑うべきですが、これだけでは質問者さんの状況が正しく伝わりませんし、再現確認もできません。 「できない、ではどうした?(調べたこと、試したこと)」が分かりません。 平たく言うとこれが丸投げです。
EXIT

2019/02/24 10:37

失礼しました。
m.ts10806

2019/02/24 10:39

それぞれのファイルの読みこみでエラーは出てないのですよね? body内は何もコンテンツなしなのは間違いないですか?
EXIT

2019/02/24 10:47

はい。スクロールバーはちゃんと表示されていますが、設定したオプションが効きません。 修正しました。これで全部です。
m.ts10806

2019/02/24 10:51

なんか、見知らぬcssが増えましたね。jQueryプラグインはもともとのhtmlを操作するものがほとんどですのでcssなどhtmlに影響がある機能を使っている場合、なにが影響して動作が正常でなくなるかわかりません。 まずは自身が入れたものを一通り除いてミニマム構成で試されることを強くすすめます。
EXIT

2019/02/24 12:53

他(doctor-reset.cssとslickプラグイン系)をコメントアウトし、必要最低限のcssのみで読み込みましたがやはり設定したオプションが効かずスクロール後もバーが消えませんでした。 なので他のcssやjsは関係なく別の所に原因があると思うのですが…
wwbQzhMkhhgEmhU

2019/02/24 19:27

最小限で試したのならその最小限の再現するソースを貼ってください。 HTMLとJavaScriptも分けないでください。 外部から読むものは全てCDNからにしてください。 コピペしてそのまま動かない限り見ることすらないですよ。 あくまでこの問題を解決する主体はあなたです。他の誰かは全く困っていないのです。 最低限それくらいはしましょう。
m.ts10806

2019/02/25 00:30 編集

wwbQzhMkhhgEmhUさん CDN場所分かり難いのでそれは示してあげたほうが良いです(そもそもjQueryもローカルに落としてきているっぽいところからCDNという概念を知っているかどうか分かりませんし)
EXIT

2019/02/25 14:19

確かにです。失礼しました。色んなものにCDNがあることも今知りました。。
wwbQzhMkhhgEmhU

2019/02/25 15:48

→mts10806さんへ 今しがた書き込みに気付きました。EXITさんが書くまで、なんか通知来てなかったみたいですね。 反応が遅れてすみません。 すでに回答までして頂いたようで、ありがとうございます。 なおCDN推奨はあくまで質問者に必要なだけで、動くと分かっている回答者のソースにCDNを使う必要はない、と考えています。私も気分で使ってしまうことがありますが、他所様のリソースには違いないので。CDN利用の主なメリットは地球の裏側からもアクセスされるようなケースでも、手間取らないことだと思っています。このサイトのような場所なら、全員推奨でもいいかとも思いますけどね。普通のサイトがCDNだらけになると、いいのかな?って気がします。 なお、質問者も普通にググれるし探せるはずなので、甘やかす必要はないと思います。 何はともあれお疲れ様でした。
guest

回答2

0

ベストアンサー

結論から言うと、ドキュメントをきちんと読んでないから
ですね。理由。


ここからは問題解決のために私が辿ったロジックです。
私はある程度、実務も経験があり、現役でWebプログラマーをやっている者ですが、知識・技術がある程度あっても必ず下記のように試行して実現したり、問題解決に至っています。


ドキュメントでは基本形から少しずつ応用にいくようになっています。
どこまでドキュメントを読まれたのかは分かりませんが、最初に提示されたHTMLとか、現状からすると必要な設定がなされていないようにしか思えません。

この手のものは基本形から1つずつ試していくしかありません。
非常に面倒くさい作業に思えるかもしれませんが、そうするしかないわけです。
**基本をおさえずに応用には移れません。**ショートカットは出来ない部分です。

そもそもの前提ですが、「スクロールバー」はそもそもコンテンツがそこを囲う枠をこえた量入れられたときに出るものですから、改行を多く入れるとか1行の文字数を多くするとかで試さないと意味がありません。
最初の提示されたHTMLには何も中がありませんでしたよね。
それではスクロールするものがないわけですから出るわけがありませんし、今「~~~」のように省略されていますが、それでは赤の他人が誰も再現できるわけがありません。

今回関係しているプラグイン以外のファイル(CSS,JavaScript)が沢山読み込まれていますが、その状態では何が原因かの問題切り分けができません。
特にCDN利用で読み込ませていない場合、自身で手を加えることもできますし、そもそもファイルの配置が正しくなかったりすると、そこでエラーになって周囲への影響は計り知れません。
※CDNはファイルをダウンロードして配置するのではなく直接Webのファイルをリンクさせるために提供されているサービスのことです。(参考:CDNとは

必ず、基本形でミニマム構成からきちんと「部品を完成」させる必要があります。

私は下記から本プラグインのCDNを取得しました。

overviewのImplementationの説明にあるcdnのリンクからもいけます

※ライブラリであり絶対的に本体に改修が入らないものであるjQueryこそCDNですね。

基本形、ミニマム構成のプログラムソース

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <title></title> 5 <link href="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.6.3/css/OverlayScrollbars.min.css"> 6 </head> 7<body> 8aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 9<script 10 src="https://code.jquery.com/jquery-3.3.1.min.js" 11 integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 12 crossorigin="anonymous"></script> 13<script src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.6.3/js/jquery.overlayScrollbars.min.js"></script> 14<script> 15$(function(){ 16 $("body").overlayScrollbars({}); 17}); 18</script> 19</body> 20</html>

本当にこれだけです。
これが基本形ですね。

ただ、ドキュメントを読み進めていくと、あまりbodyに直接指定しているようなケースがないように見受けられます。
bodyに指定したとしてもoptionsのclassNameに指定するような形ではないでしょうか。

ちなみに基本形ができたのでとりあえず、問題のコードをやってみるかと、下記のようにした場合、

js

1$(function(){ 2 $("body").overlayScrollbars({ 3 autoHide: "scroll", 4 }); 5});

スクロールについてはそのまま効いているようですが、何も変化はありません。
ただし、ブラウザ開発ツールのコンソールを見ると下記のようになっていました。

イメージ説明

The following options are discarded due to invalidity

Google翻訳にかけると「以下のオプションは無効のため破棄されます」と出ています。
つまりオプションの指定の仕方を間違ったということになりますね。

要は、プログラミング言語で言うと構文ミスと同等です。
存在しない機能を使おうとしたら効かないのは当然ですが、このプラグインはそれを教えてくれるだけ優しいと思います(何も出ず無視されたり、JavaScriptのエラーが出るだけだったり結構雑です。)

プラグインのコードを見ると下記のようにconsole.warn()で出してくれてますね。
イメージ説明

構文ミスがあったら立ち返るのはマニュアル・ドキュメントです。
そこに最も正しい情報があります。

ひとまず問題解決をしたいでしょうから、基本形ができた、という状態ですし、
本来はもっと検証すべきことはありますが、質問者さん自身が「実装したい」と仰っている機能のほうに移動しましょう。

Minimal:

The scrollbars are only visible during scrolling. (due to the option: scrollbars.autoHide : "scroll")
Flexible handle size, the track is invisible. The handles goes thicker if you hover over or drag them.
Google:翻訳
最小:
スクロールバーはスクロール中にのみ表示されます。 (オプション:scrollbars.autoHide: "scroll"のため)
柔軟なハンドルサイズ、トラックは見えません。マウスポインタを合わせるかドラッグすると、ハンドルが太くなります。

キーワードが出てきました。
scrollbars.autoHideこれですね。
ただし、オプションはキー:値の連想配列形式ですから、scrollbars.autoHideという書き方はできません。

.でつなぐ書き方は「オブジェクトのプロパティを指定するときの書き方」です。

ドキュメントのオプションの書き方を見てみましょう。

js

1{ 2 className : "os-theme-dark", 3//中略 4 scrollbars : { 5//中略 6 autoHide : "never", 7 8 }, 9//後略 10}

それっぽいのがありましたね。
文字列検索をしてみると分かりますが「autoHide」という設定はここしかありません。
ということで、このオプションを入れたいならこう。

js

1$(function(){ 2 $("body").overlayScrollbars({ 3 scrollbars :{ 4 autoHide: "scroll", 5 } 6 }); 7});

でもこれで本当に実現できるかどうかは一考しなければなりません。
body自身に指定しているわけですし。
jQueryの指定では$(id).overlayScrollbars({ /* your options */ }); のように内部的な要素に対して指定するような基本形になっていますし、Minimalの例も特定のIDに対して指定されているように見受けられます。

autoHideの設定部分だけをドキュメント通りにしたからと想定通りに動くとは限りません(他のプラグインやライブラリが競合してしまうことは良くあります)

そのあたりは、ドキュメントをきちんと読み込み、私が最初に提示したようなミニマム構成で試して、そこだけの機能部品が出来上がってから、組み込んでいくようにしてください。

投稿2019/02/25 02:16

編集2019/02/25 03:58
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2019/02/25 03:38

To: mts10806さん すごい丁寧・・・! 文末の「Implementation」は念押しですか?
m.ts10806

2019/02/25 04:00

この質問前後くらいからでしょうか、 https://teratail.com/questions/175894 若干、吹っ切ってます。 自己満足にならないようにするのが難しいです。 >Implementation たぶんCDNの辿り方書くときにちょっと入り込んだものですね。削っときました。
EXIT

2019/02/25 14:22 編集

とても詳しく丁寧な回答、大変感謝致します。 回答する方も自分の元で試してから回答されるんですね。コードスペニットがなくそこらへんに意識が回っていませんでした… これからはすぐ実行できる感じにして書きます。 今まで無駄に手間をかけさせてしまっていたようで、とても申し訳なく思います…(今も) CDNってどのプラグインにもあるんですね! 確かに、jQueryは私も元からCDNにすることにします! ほうほう。`warn`なんてあるんですね。 (私がわかりやすいようにしてくださってならごめんなさい → `.min`のやつは左下の{}を押すと元の見やすい感じに戻してくれますよ!) おーそうなんですね!`scrollbars.autoHide`でミスっていました^^; あーそれか! 作成者の方がわかりやすいようにジャンル分けしてくださってるのかと思ってました。「こう書く」って意味だったんですね! プラグインごとで設定方法とか違うんですね。大変勉強になりました。 そしてちゃんと実装できました!本当にありがとうございます!! p.s.「teratailでの答えやすい質問の仕方」や「プラグインの入れ方」みたいな感じで記事にしてはどうですか? 各私のようなJSを分かりきってない初心者や質問側にとても需要があると思います。 ここだけに貼っておくのはあまりに勿体無いですよ!とても詳しく分かりやすく、本当に記事のような読み応えでした。
wwbQzhMkhhgEmhU

2019/02/25 15:54

→EXITさんへ 感謝するのではなく、反省してください。 本来この回答に書かれた内容を記述するのはあなたの役割です。 問題を整理するところまでは、質問者の仕事です。 あなたが言われたことをしっかりやって、質問を整理していたなら、mts10806さんもここまで長文にする必要がありませんでした。 普通は、言われたことをやっているうちに、ごくごく自然に自分で解決できるはずです。 問答が長くなるのは、あなたが言われたことをしっかりできていない証拠です。 繰り返しますが、反省してください。
m.ts10806

2019/02/25 23:28

質問者さん ドキュメントの読み方を確認してください。辞書や説明書と同じです。 算数で言えば1+1=2のようなところから始まり、引き算、掛け算へと進みます。 足し算を知らない人が掛け算はできませんよね?プログラミングにも同じことが言えます。 プラグインを使うのも同じです。 ルール無視してては使えないのは当たり前。 >CDNってどのプラグインにもあるんですね! どこをどう判断して「どのプラグインにもある」と判断されたか知りませんが、ものによる、としか。全てを知ってるわけではないですが直リンク禁止でダウンロードのみのものもあるはず。 >min 心配ご無用。おそらくminifiedの仕様や考え方は質問者さんより知っています。 >p.s そういうお節介言ってる暇があったらマニュアル読んでください。デバッグをマスターしてください。 私の回答に込められた意味や意図を半分も理解してないことを認識してくださいね。
m.ts10806

2019/02/25 23:34

wwbQzhMkhhgEmhUさん 意図や気持ちまで察してくださった上でのフォローはありがたいのですが、質問者さんのこれまでの経緯から反省を強いるのはあまり意味がないですし、ためにならないと思います。 今回の質問、回答で質問者さんが今後どのようになっていくかが大事ですしね。 一番気づいてほしいのは「マニュアル読み込みと適切なデバッグでほとんどの質問は質問する前に解決する」というところです。 自己解決可能であり、自己解決が何よりも早く確実であるというところが分かるかどうかですね。
wwbQzhMkhhgEmhU

2019/02/26 00:12

mts10806さん あなたがそこまでおっしゃるのであれば、私がとやかく言うことではないですね。差し出がましい真似をしました。 個人的には性格的な問題に見えたので、厳しめかつ、頭ごなしな意見にしておきました。本人が意図まで把握するのは何年先になるか分かりませんが、年齢なども分からないこの手のサイトでは、こういうのもしておかないといけないことかと思った次第です。 お手を煩わせてすみません。
m.ts10806

2019/02/26 00:20 編集

性格的な問題なのは以前の質問を見たことがある人みんなが分かっていることだと思います。簡単に聞き入れる人ではないということも分かっているので、あえてここまで丁寧な回答にしています。 この問題を解決するだけなら実は2,3行コードだけの回答もできた(または「マニュアルに書いてあります」だけとか)、というのは別の回答の通りなので、そこも含めて、私も回答の冒頭に「問題解決までのロジックです」と注意書きしてます。そこを察するかどうかは技術力は全く関係のない、あくまでコミュニケーション能力、ひいては人となり、人間性の問題なので、そこに本人が気づけるかどうかが今後の成長にかかってくるというところですね。 正直どのような丁寧な回答をしたとしても、私は掛け捨ての保険と同じように思ってますので、その後、数回見て継続フォローが可能か判断します。質問者は実は”選ばれている”→”回答者に選んでもらうために努力する必要がある”というところを認識してもらいたいところですね。 回答がつかなければそれは質問内容か自身のやり方に問題があるのはほぼほぼ間違いないわけですし。
EXIT

2019/02/26 21:06

>>wwbQzhMkhhgEmhUさん 実は私コードは完全に独学&今までの人生の中でも本当に全くコードに触れてなかった(周りにコードする人がいなかった)人間なので、 コーダーの方にとっては当たり前なのかもしれませんが、純粋に「あーなるほど、こうするんだ、こうすればいいんだ」と思いました。 もちろん反省していますが、それよりも教えて下さってありがとうという感謝の方が大きかったため、このような文章になりました。(「申し訳ない」と一回しか入ってないからそう見えたのでしょうか…同じことを何回も言う必要ないと思ったので一文に込めてます。結構申し訳ないと思ってます)
wwbQzhMkhhgEmhU

2019/02/26 21:17

あなたの知識や環境や理解力に関係ある話でもなく、単に作業としての精度と性格についての話なので、あなたの言い分は何の関係もありません。通じていないこと=1mmも反省していないことが分かったので、この辺で終わりで。
EXIT

2019/02/26 22:03 編集

>>mts10806さん すみませんでした。JSは更に日が浅く、プラグインの使い方を基礎から解説してくれるサイトも見当たらなかったため全く基礎のキも分かりませんでした。 なので、JSプラグインの使い方を基礎から教えて下さったmts10806さんにとても感謝しています! あーそうなんですね!なるほどです。 やっぱそうですよね失礼しました! 本当に為になったので後に見る他の方も助かると思い提案してみたんですが(記事の方がやはり検索にヒットしやすいので)、お節介でしたか…ごめんなさい。 はい、「こういう風にする」ということがわかったので今後存分に役立てていこうと思います。
m.ts10806

2019/02/27 00:55

基本が大事 というところですね。 何かあったときには基本に立ち返ること。 それこそHello Worldの次の段階まで。 初心者がHello Worldの次に覚えるのはデバッグとマニュアルの使い方だと私は常々思っています。 それだけで他人を頼ることなく解決できるケースが幾つもあるからです。
m.ts10806

2019/02/27 01:35

ちなみに、私はあくまで基本にのっとった実現方法(自分が辿った道筋)を書き連ねているだけで、何も真新しいことはしていないんですよね。 だから記事にする必要はないと思っていますし、もし何かしら記事にしようと思っても私が思いつくようなものは既に記事になっていたりするので、その記事を見れば良い、という考えです。 もしどうしてもと言うのでしたらご自身で備忘録代わりにQiitaにでも書かれたらいかがでしょうか?
guest

0

該当のプラグインのドキュメントを読みましたが、以下のようにするのが正しいと思いました。

js

1$(function(){ 2 $("body").overlayScrollbars({ 3 scrollbars.autoHide: "scroll", 4 }); 5});

指摘を受け修正します。

js

1$(function(){ 2 $("body").overlayScrollbars({ 3 scrollbars :{ 4 autoHide: "scroll", 5 } 6 }); 7});

autoHideはscrollbarsの中で定義する必要があります。

投稿2019/02/25 01:00

編集2019/02/25 02:38
noka_blank

総合スコア252

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/02/25 02:18 編集

JavaScriptの基本としてその書き方はNGです。 SyntaxError出ますよ。 ドキュメントにもそのような書き方はありません。
noka_blank

2019/02/25 02:35

すいません。 scrollbars.autoHide : "scroll" という部分を読み違えました。 ``` $(function(){ $("body").overlayScrollbars({ scrollbars :{ autoHide: "scroll", } }); }); ``` これが正しいですね。回答を修正します。
EXIT

2019/02/25 14:17

ありがとうございます。それでちゃんと動きました! 私も質問前一度1つ目と同じミスをしていました笑 そうすればよかったんですね。なるほどです!
noka_blank

2019/02/25 14:47

解決できて良かったです^_^
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問