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

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

ただいまの
回答率

89.52%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,180

EXIT

score 17

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

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

<html lang="ja">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="description" content="~">
 <title>~</title>
 <link rel="icon" href="favicon.ico">
 <link rel="stylesheet" href="css/doctor.css">
 <link rel="stylesheet" href="css/styles.css">
 <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
 <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

<!-- ↓今回のjQueryプラグイン -->
 <link type="text/css" href="osb/css/OverlayScrollbars.css" rel="stylesheet"/>

</head>
<body>
~~~
 <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
 <script type="text/javascript" src="slick/slick.min.js"></script>
 <script type="text/javascript" src="osb/js/jquery.overlayScrollbars.js"></script>
 <script type="text/javascript" src="js/op-osb.js"></script>
 <script type="text/javascript" src="js/op-slick.js"></script>
</body>
</html>
$(function(){
$("body").overlayScrollbars({
  autoHide: "scroll",
});
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/02/25 09:30 編集

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

    キャンセル

  • EXIT

    2019/02/25 23:19

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

    キャンセル

  • wwbQzhMkhhgEmhU

    2019/02/26 00:48

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

    何はともあれお疲れ様でした。

    キャンセル

回答 2

checkベストアンサー

+12

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


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


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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
  <head>
      <title></title>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.6.3/css/OverlayScrollbars.min.css">
  </head>
<body>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.6.3/js/jquery.overlayScrollbars.min.js"></script>
<script>
$(function(){
   $("body").overlayScrollbars({});
});    
</script>
</body>
</html>


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

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

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

$(function(){
   $("body").overlayScrollbars({
     autoHide: "scroll",
  });
});   


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

イメージ説明

 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という書き方はできません。

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

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

{
    className            : "os-theme-dark",
//中略
    scrollbars : {
//中略
        autoHide         : "never",

    },
//後略
}


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

$(function(){
    $("body").overlayScrollbars({
        scrollbars :{
            autoHide: "scroll",
        }
   });
});

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/27 06:29 編集

    >>mts10806さん

    すみませんでした。JSは更に日が浅く、プラグインの使い方を基礎から解説してくれるサイトも見当たらなかったため全く基礎のキも分かりませんでした。
    なので、JSプラグインの使い方を基礎から教えて下さったmts10806さんにとても感謝しています!

    あーそうなんですね!なるほどです。

    やっぱそうですよね失礼しました!

    本当に為になったので後に見る他の方も助かると思い提案してみたんですが(記事の方がやはり検索にヒットしやすいので)、お節介でしたか…ごめんなさい。
    はい、「こういう風にする」ということがわかったので今後存分に役立てていこうと思います。

    キャンセル

  • 2019/02/27 09:55

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

    キャンセル

  • 2019/02/27 10:35

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

    キャンセル

+2

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

$(function(){
  $("body").overlayScrollbars({
    scrollbars.autoHide: "scroll",
  });
});

指摘を受け修正します。

$(function(){
    $("body").overlayScrollbars({
        scrollbars :{
            autoHide: "scroll",
        }
   });
});

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/25 11:17 編集

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

    キャンセル

  • 2019/02/25 11:35

    すいません。
    scrollbars.autoHide : "scroll"
    という部分を読み違えました。

    ```
    $(function(){
    $("body").overlayScrollbars({
    scrollbars :{
    autoHide: "scroll",
    }
    });
    });
    ```

    これが正しいですね。回答を修正します。

    キャンセル

  • 2019/02/25 23:17

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

    キャンセル

  • 2019/02/25 23:47

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

    キャンセル

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

  • ただいまの回答率 89.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる