FORSMILE
EN
JavaScript2020/12/22

ウィンドウに要素が表示された時に処理を行う[jQuery]

jQueryですが、要素がウィンドウ内に表示された時のイベントを追加できます。

ブログ一覧へ / Back to Blog

jQueryですが、要素がウィンドウ内に表示された時のイベントを追加できます。

jQueryのプラグイン:jquery.inview

javascript
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="../jquery.inview.min.js" />

・・・

// code
$(function() {
  $('.inview').on('inview', function(event, isInView) {
    if (isInView) {
        // element is now visible in the viewport
    } else {
        // element has gone out of viewport
    }
  });
});

上記例だと、classinviewが指定されている要素が画面内に表示された時にイベントが発生します。簡潔に下記のように書いてもOKです。

javascript
$('.inview').on('inview', function(){
        $(this).addClass('active');
});

上記例は、表示された要素に、classactiveを追加しています。

表示された時にアニメーションさせたり、色々な使い道があり便利です。

jQueryおすすめの書籍

jQueryの書籍は、古いものが多いです。ただ、jQuery自体は今も進化しています。

📦
Amazon で関連書籍・ツールを検索
JavaScript 入門 プログラミング
Amazonで探す →(アソシエイトリンク)