More than 3 years have passed since last update.

[ jQuery ] 指定した要素が画面内に入っているか判定するjQueryプラグイン

Posted at 2020-03-04

#概要
簡単に言ってしまうとタイトル通りですが、
状態によってクラス名を付与するようにしました。

###付与されるクラス

"_item_out_top"：上辺が画面よりも下にいる（画面外）
"_item_in_top"：上辺だけ入っている
"_item_in_all"：全体が入っている
"_item_in_bottom"：下辺だけが入っている
"_item_out_bottom"：下辺が画面よりも上にいる（画面外）

※似たような jQueryプラグインとしては jquery.inview が既にありますが、
これは要素が画面内にあるかどうかだけを判定しているようです。

HTML

index.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>動作サンプル</title>
<style>
    body { margin: 0; padding: 0; text-align: center;}
    .space { width: 5px; height: 1500px; margin: 0 auto; background: #efefef; }
    .box { width: 200px; height: 200px; margin: 0 auto; }
    .box.red { background: red; }
    .box.blue { background: blue;}
    .box.green { background: green; }
    .box.orange { background: orange; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
<script src="common/js/inviewChecker.jquery.js"></script> 
<script>
        $(function(){
            // チェック対象のクラス名を指定する
            $('.checkItem').inviewChecker();
        });
    </script>
</head>
<body>
    <div class="space"></div>
    <div class="box red checkItem"></div><!-- チェック対象 -->
    <div class="space"></div>
    <div class="box blue checkItem"></div><!-- チェック対象 -->
    <div class="space"></div>
    <div class="box green checkItem"></div><!-- チェック対象 -->
    <div class="space"></div>
    <div class="box red checkItem"></div><!-- チェック対象 -->
    <div class="space"></div>
</body>
</html>

#jQueryプラグイン

inviewChecker.jquery.js

/* ----------------------------------------
   inviewChecker.jquery.js
   Copyright (c) 2020 Toru Watanabe
   Released under the MIT license
---------------------------------------- */
(function ($) {
    $.fn.inviewChecker = function () {
        let $t = $(this);

        let inviewChecker = (T) => {
            let _st = $(window).scrollTop();

            T.each(function () {
                let $t = $(this),
                    _tt = $t.offset().top,
                    _tb = _tt + $t.height(),
                    _p = _st + $(window).height();

                let _classSet = '_item_in_all _item_in_top _item_in_bottom _item_out_top _item_out_bottom';

                if (_p >= _tt) {
                    // 上辺だけ入っている時
                    if (_p <= _tb) {
                        $t.removeClass(_classSet).addClass('_item_in_top');
                    }
                    // 下辺まで全て入った時
                    if (_p >= _tb) {
                        $t.removeClass(_classSet).addClass('_item_in_all');
                    }
                    // 上辺が画面の上に出た時
                    if (_tt < _st) {
                        $t.removeClass(_classSet).addClass('_item_in_bottom');
                    }
                    // 下辺が画面の上に出た時
                    if (_tb < _st) {
                        $t.removeClass(_classSet).addClass('_item_out_bottom');
                    }
                } else {
                    // 上辺が画面の下にいる時
                    $t.removeClass(_classSet).addClass('_item_out_top');
                }
            });
        }

        // 読込み直後
        inviewChecker($t);

        // ウィンドウスクロール時
        $(window).on('scroll', function () {
            inviewChecker($t);
        });

        // ウィンドウリサイズ時
        let timer = 0;

        $(window).on('resize', function () {
            if (timer > 0) {
                clearTimeout(timer);
            }

            timer = setTimeout(function () {
                inviewChecker($t);
            }, 1);
        });
    };
})(jQuery);

#圧縮版

inviewChecker.jquery.min.js

/* ----------------------------------------
   inviewChecker.jquery.min.js
   Copyright (c) 2020 Toru Watanabe
   Released under the MIT license
---------------------------------------- */
(function($){$.fn.inviewChecker=function(){let $t=$(this),inviewChecker=(T)=>{let _st=$(window).scrollTop();T.each(function(){let $t=$(this),_tt=$t.offset().top,_tb=_tt+$t.height(),_p=_st+$(window).height(),_classSet='_item_in_all _item_in_top _item_in_bottom _item_out_top _item_out_bottom';if(_p>=_tt){if(_p<=_tb){$t.removeClass(_classSet).addClass('_item_in_top');}if(_p>=_tb){$t.removeClass(_classSet).addClass('_item_in_all');}if(_tt<_st){$t.removeClass(_classSet).addClass('_item_in_bottom');}if(_tb<_st){$t.removeClass(_classSet).addClass('_item_out_bottom');}}else{$t.removeClass(_classSet).addClass('_item_out_top');}});}
inviewChecker($t);$(window).on('scroll',function(){inviewChecker($t);});let timer=0;$(window).on('resize',function(){if(timer>0){clearTimeout(timer);}timer=setTimeout(function(){inviewChecker($t);}, 1);});};})(jQuery);

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up