jQueryのscrollTopなどが勝手にアニメーションしてしまう原因
jQueryでscrollTopというのがありますが、ウィンドウのスクロール位置を瞬時に移動させるつもりで書いたのに、スルスルっとスムーススクロール的な動きをしてしまう事があります。
誰かが書いたコードや既成のテンプレート等を受け取って作業する事も多い筆者。またも「scrollTopが勝手にアニメーションしてしまう現象」でハマってしまいました。
前回はかなり前だったと思うのですが、これは間違いなく２度目です。絶対、前にも同じ事でハマりました。
という事で、腹が立つのでこのブログに書いておこうと思います。
～ 目次 ～
scroll-behaviorが原因でした…
「scroll-behavior？知ってるよ。内容が古いね。。。」
とか言わないで下さい。恥ずかしながら、こんなん知りませんでした。CSSでスムーススクロールを実現するプロパティなんですね。
言い訳になりますが、新しいプロパティって消えていくものも結構あって、仕様を読むのは主要ブラウザで安定して使用できるようになってからにしています。どうせ使えないし、時間が無駄になるかもしれませんし。。
で、結局のところ、scrollTopで指定座標にスクロールする際に、animateとかしていないのにアニメーションしてしまう原因は、CSSに以下のコードが書き込まれていた事でした。
|
1 2 3 |
html{ scroll-behavior:smooth; } |
こいつが書いてあると、なんの指定もしていないのに気持ち良くスクロールしてくれちゃいます。
ちなみに前述した理由で仕様などを詳しく読んでいませんが、FirefoxやChromeあたりは対応しているようなので、これらのブラウザを使用していないとハマらない（バグに気づかない）かもしれません。
最後に
私のようにハマる人、日本に３人くらいは居るはず。
CSSが原因だとは思わず、JSファイルの中で原因を探し回っちゃって、気付いたら半日くらい時間を使っちゃう人が、ぜったい居るはず。。
私はさすがに記事を書いているうちに記憶したようで、自分でこの記事を読み返すことはなさそうです。
