久しぶりにドハマリしたので備忘録。
＜問題＞スムーススクロールが突然動かなくなった
自作サイトに使用していたjQueryによるスムーススクロールが突然動かなくなりました。
同時にページ下方へスクロールしたときに自動表示される「ページトップへ」の画像も表示されなくなりました。
（今からするとこの二点という時点で気づくべきでした。。）
＜調査＞
①ネット接続が切れていないか
意外とこれが原因であることが多いので真っ先に調べましたが問題ありませんでした。
②jQueryが読み込めていないのではないか
GoogleのCDNから読み込んでいるのですが問題ありませんでした。
同じリンクを読み込んでいるポートフォリオサイトが正常に動いているため①と同時に確認できました。
③記述ミスしているのではないか
もうこれしかないと思ってわりとがっつり調べました。半日くらいかけて。
1.他のjQuery（「ページトップへ」画像のhiddneやデバッグで入れたalart）は問題なく動いているため、jQuery部分は問題なし。
2.念のためjQuery部分を再度書き直したのですがやはりスムーススクロール部分だけが反応なし。
3.次に、HTMLとCSSを部分的に削除して動作を確認するも反応は変わらず。（そもそもページの表示を見る限りHTMLとCSSの崩れはなさそう）
4.もう、苦肉の策でコード検索と視認で順番に調べるも見つかりませんでした。
この辺でもう心が折れかけてたのですが、なんとなく<head>部分を順番に決して確認してみたところ、CSSの外部ファイルのリンクを削除するとスムーススクロールが動くことを確認。
一筋の光が差しました。
あとは順番にCSSファイルを部分削除し、やっとのことで原因を特定することができました。
＜原因＞overflow-xを使用するとscrollTopの値が取得できない
原因がoverflow-xだと判明。
animeteによってx軸が広がるのを防ぐために使用していたのですが、ダメだった様です。
いろいろ試してみたところ、body直下でoverflow-x指定することでscrollTop値を取得可能の様だったのでそのように対処しました。
解決後に調べてみたのですが、結局原因はわからず。
↓他サイト様のこういった記事も見つけたので、きっと珍しい事ではないのでしょう。
ひとまず「そういうもの」として受け止めることにしました。
＜対策＞
今回ドツボにはまった原因は、知識不足ということももちろんありますが、
- 問題に対する検索ワードのセンスが足りなかった。
- <head>部分にデバッグの意識を向けるまでに時間がかかった。
の二点が大きいですね。
1.の検索ワードについては、動作しない箇所の共通点がscrollTopの値を取得している点である事、それ以外のjQueryは問題なく動作している事に焦点を当てればたどり着けた可能性があります。
また、2.については、（これまで同一事象に出会った事が無かったとはいえ）もうちょっと早くピンときても良かったかなと感じます。
（コードを検索と視認で確認するよりも先にこっちを思いつくべきでした。。）
とまぁ、自サイトながら勉強になった経験でした。
作成したサイトはあとはスマホverが出来れば公開できるのでお楽しみに！
