見出し画像

ScrollReveal.jsが全然動かなかった話

やりたかった事

https://scrollrevealjs.org/

このサイトを参考にScrollReveal.jsを自分で作成した静的htmlサイトで使用したかった。

現状

検証ツールで確認してみると、opacityが0になっていたりして、全く反応していない。

jsファイルはconsole.logとかで試してみると正しく読み込めていた。

試行錯誤

色々調べていると、jsファイルを読み込むリンクがおかしいのかもみたいなのが書いてあった。

slim版だと色々動かないのがあるらしい。自分はbootstrapのスターターキットを使っていたので、以下に変更した。

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js""></script>
以下に変更
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

上記でも解決しなかった。。。。

ここで謎が判明。自分で作っている他の静的htmlだとScrollReveal.jsが動く!!!

試しにscriptを動く方の記述にしてみる。動かない。なぜ。

しかもここで動くか試したところちゃんと動く!!!なぜかlocalだけ動いてくれない。

でも。。という事はjsの読み込みは関係なさそう。

なんかhtmlとcssで変なことしてるかも。。。。

解決

見つけた。html,bodyに変なの適用してた。

html, body{
 overflow-x: hidden;
}

これをコメントアウトしてあげると正しく動くようになった!!!!

いや〜、なんでこんなの付けてたんだろう?w

適当に書いていくと今回みたいにロスに繋がるので、ちゃんと書いていきたいですw

手順としては、js読み込まれてた->同じスクリプトでも他のhtmlサイトだと反映される->スクリプトは行けてそう。->じゃあ変なことどっかに書いてる?->書いてたぁぁ!

って感じでした。

めでたし。

以上!

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
1
19歳です!https://tenlife123.com/ LaravelとかVue.jsを中心に勉強中! フリーライドスキーヤー。国内外の大会に出場、戦績は入賞、優勝など。 Sponsor: Salomon,Niseko Grand Hirafu, Mt.石井スポーツ

こちらでもピックアップされています

ちっちゃな実装編
ちっちゃな実装編
  • 9本

個人開発までいかない、単発の実装やエラーなど。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。