WEBサイト制作・アプリ開発・システム開発・ブランディングデザイン制作に関するご相談はお気軽にご連絡ください。
構想段階からじっくりとヒアリングし、お客様の課題にあわせたアプローチ手法でお客様の“欲しかった”をカタチにしてご提案いたします。
Blog スタッフブログ
WEB制作
Bootstrap5.3のスムーズスクロールを無効化する
とあるプロジェクトでページ内のアニメーションやスクロール連動表現で多用される GSAP ScrollTrigger を導入したところ、スクロールアニメーションが思うように動かないという問題に直面しました。
スクロールが常にスローモーションになるという問題です。
検証の結果、一緒に使っていた「Bootstrap 5.3」の影響を受けていることが判明しました。
bootstrap.cssの中次の行があります。
@media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: smooth;
}
}
これがjsライブラリの処理に影響及ぼしていました。
この行を削除することで意図した挙動にすることができました。