AOS+smooth-scrollが引っかかったスクロールバグの話

皆さんはjsアニメーションのライブラリは何を使用していますか？

私はAOSを使用することがほとんどで、複雑な場合は発火だけjsに任せてcssアニメーションで調整するようにしています。

今回はそんなAOSとsmooth-scrollを使用して、スクロールが引っかかって困ったスクロールバグの話です。

# この記事で解決すること

AOSでのスクロールバグ（引っかかり）を解決できる

前提

今回はトラブル解決です。

使用したライブラリは下記のとおりです。

問題

例えば下記のような構文があるとします。

<html>
  <body>
    <main>
      <article>
        <section id="hoge" class="hoge" data-aos="fade-left">
          <div class="hoge__inner">hogehoge</div>
        </section>
        <section class="fuga" data-aos="fade-right">
          <div class="fuga__inner">fugafuga</div>
        </section>
      </article>
    </main>
    <!-- smooth-scrollでhogeに行くボタン -->
    <div class="to-con-1">
      <a href="#hoge">hogeへ</a>
    </div>
  </body>
</html>

上記の場合、右側に余白ができることが予想されます。

そこで、overflow-x: hidden;をかける必要があります。

私の場合は一つ一つの要素に対してoverflowをかけるのが面倒だと思ったので、<main>に対してかけていました。

そして、smooth-scrollで#hogeへ戻ると、そこからスクロールの引っかかりが発生しました。

スマホが主ですが、すごくゆっくりスクロールしないと下にスクロールできない状況です。