ScrollHintというライブラリを導入したい

ScrollHintというライブラリの導入方法について

ライブラリの導入方法についての基本的な質問になってしまうかもしれませんがお許しください。
現在、一部に横スクロールがあるウェブページを作っていて、
その中で、ScrollHintというライブラリを使いたいと思っています。

ScrollHintの公式ページには導入例として下のように書いています。

実装にあたって、CDNではなくダウンロードして実装したいのですが、
ダウンロードしたところ、フォルダ内はに下（写真）のような
内容になっていました。

少し調べたところjsファイルだけ読み込めばいいと書いているサイトがあったので、下の、

「scroll-hint.min.js」だけhead内に読み込ませました。
そして、横スクロール箇所に
js-scrollableというクラスをつけて、

</body>の直前に <script> new ScrollHint('.js-scrollable'); </script> をかきましたが全く反映されません。

htmlは以下のようになっています。

<head> … <script src="js/scroll-hint.min.js"></script> </head> <body> … <div class="js-scrollable"> 　　　<img class="yokonaga-gazo" src="./img/画像" alt="＃"> </div> 　　　 <script> new ScrollHint('.js-scrollable'); </script> </body>

ご教授いただけると幸いです。
よろしくお願いいたします。

追記

丁寧なご指摘ありがとうございます。
以下scroll-hintのライブラリの公式URLです。

https://appleple.github.io/scroll-hint/　

コードは省略しつつ、下のようになっています。
cssも読み込ませてみましたが表示されませんでした。

html
1<head>
2  <link href="css/scroll-hint.css" rel="stylesheet" type="text/css">
3  <script src="js/scroll-hint.min.js"></script>
4</head>
5
6<body>
7  <!--横スクロール部分-->
8  <div class="wrap js-scrollable">
9　　　<img class="yokonaga-gazo" src="./img/画像" alt="＃">
10  </div>
11  <!--//横スクロール部分-->　　 
12
13<script>
14new ScrollHint('.js-scrollable');
15</script>
16
17</body>
18

css
1/*横スクロール*/
2.wrap{
3overflow: auto;
4	
5}
6img.yokonaga-gazo{
7  max-width: initial;
8  width:2000px;
9}

ライブラリの読み込むべきファイルが間違っているか、
jsの記述が足りないのかなと思っていますが、なかなか解決できないでいます。
ご解答いただけましたら助かります。

m.ts10806

2020/04/20 21:19

＞ScrollHintの公式ページには導入例として下のように書いています画面キャプチャ切り出しではなく公式ページのURLを提示してください。切り出すと本当に必要な情報が伝わりません。また、コードはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

m.ts10806

2020/04/20 21:21

コードは全体の流れが分かるものか最小構成で作ったものが望ましいです。見た感じCSSはリンクさせてないように見受けられますけど、実際はどうなのでしょう。

ccon

2020/04/20 22:25

ご指摘ありがとうございます。質問を編集し、追記いたしました。cssははじめはリンクさせていませんでした。その後追記したようにリンクさせてみましたがやはりうまくいきませんでした…。

kei344

2020/04/21 04:56

エラーは出ていませんか？デベロッパーツールで確認してみてください。https://eng-entrance.com/javascript-display-error

ccon

2020/04/21 05:37

ありがとうございます。確認してみましたが、エラーはありませんでした。ダウンロードしたライブラリで読み込むべきファイルはjsとcssで合っているでしょうか。また、スクリプトの記述も自信がありません。試しにCDNでの実装もしてみましたが、やはりうまくいきませんでした。

hoshi-takanori

2020/04/21 06:57

その html を適当に修正して、css と js ファイルをダウンロードして配置したら動きましたよ。html ファイルをどうやって表示してますか？また、css や js ファイルの置き場所は合ってますか？

行動規範の内容に同意します

回答1件

ベストアンサー

/scroll-hint-master/examples/index.html

ダウンロードしたサンプルもそのままは動かず、デベロッパーツールでモバイルエミュレーターを使ってやっと動きました。

【もう実機は不要!? Chromeのモバイルエミュレーターがとんでもなく進化していた – WPJ】
https://www.webprofessional.jp/use-mobile-emulation-mode-chrome/

状況が再現しにくいので「もしかしたらできるかも」くらいですが、全体のロードを待ってみてはいかがでしょう。

js
1window.addEventListener( 'load', function (e) {
2  new ScrollHint('.js-scrollable');
3}, true );

投稿2020/04/21 07:22

kei344

総合スコア69583

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.37%

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

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

質問する

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

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

ScrollHintというライブラリを導入したい

ScrollHintというライブラリの導入方法について

追記

関連した質問