こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptで簡単にスクロールアニメーションを実装することができるSal.jsで、要素の高さがビューポートより大きいとアニメーションが動作しない場合の対処法をご紹介しています。

Sal.jsのスクロールアニメーションが動作せずに要素が表示されない…どう対処すればいいの？

上記の疑問にお答えします。

では、解説していきます。

Sal.jsは要素の高さがビューポートより大きいと動作しない

調査したところ、本不具合は2020年10月にGithubにてissueとして登録されていました。issueの内容も同様のもので、要素の高さがビューポートより大きいとSal.jsのスクロールアニメーションは正常に動作しない、となっております。issueのステータスがIn Progressとなっているため、調査段階である可能性はありますが、2023年2月現在も修正版は公開されていません。

参考：https://github.com/mciastek/sal/issues/62

Sal.jsで要素の高さがビューポートよりも大きい場合でも動作させる

公式の修正版の公開を待つのが一番ですが、暫定的な対策として、issue内にコメントされていた下記スクリプトが有効なようです。ただし、こちらの方法はsal.jsのCSSのみを利用し、スクリプトは自前のものに置き換えるという対策方法です。スクリプトの微調整は必要になると思いますので、参考までに。

<!doctype html>
<html>
<head>
    <!-- CSS -->
    <link rel="stylesheet" href="/path/to/css/sal.css">
</head>
<body>
　　...

    <!-- JS -->
    <!-- sal.jsは読み込まず、初期化もせず、下記スクリプトを追加 -->
    <script>
    const customSalScrollAnimationHandler = () => {
        const theSals = document.querySelectorAll('[data-sal]');
        if (theSals.length) {
            [].forEach.call(theSals, (e) => {
                const salPos = e.getBoundingClientRect().top;
                const percentOfWindowHeight = window.innerHeight * 0.7; //ビューポートの高さの上から70%の位置
                if (salPos < percentOfWindowHeight) { // 要素がビューポート内の下から30%以上の位置にスクロールされたら実行する
                    e.classList.add('sal-animate');
                }
            });
        }
    };
    window.addEventListener('DOMContentLoaded', customSalScrollAnimationHandler, false);
    window.addEventListener('scroll', customSalScrollAnimationHandler, false);
    </script>
</body>
</html>

早めに修正版が公開されることを願います！

参考：https://github.com/mciastek/sal/issues/62#issuecomment-836733466

最後に

Sal.jsはCSSだけでも使いやすいライブラリではありますが、せっかく使わせていただくのであれば、公式が提供するスクリプトで軽快に動かしたいですよね。Githubは公開状態のままですので、ちょくちょく様子を見つつ、修正版が公開されるのを気長に待ちたいなと思います。

以上、Sal.jsで要素の高さがビューポートより大きいとアニメーションが動作しない場合の対処法のご紹介でした！

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

お問い合わせはこちら

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。