visible.pkgd.min.js 滑动元素检测是否显示插件-BFW插件库

visible.pkgd.min.js 滑动元素检测是否显示插件
第一步引入bfwone
第二步执行插件
示例如下
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery-3.4.1.min&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["visible.pkgd.min"], function() {
                // Create eg.Visible instance
                var visibleView = new eg.Visible('.scroller', {
                    targetClass: "card",
                    expandSize: 0
                }).on("change", function (e) {
                    // Add change event handler
                    $(e.visible).addClass("focus");
                    $(e.invisible).removeClass("focus");
                   // handler(e)
                });

                // Call "check" method whenever you want to check visibility change of the elements compared with last time you call "check" method.
                visibleView.check();

                $('.scroller').scroll(function() {
                    visibleView.check();
                });
            });
        });
    </script>
    <style>
        /** css **/
        .wrap {
            position: relative;
            width: 100%;
        }
        .control {
            float: left;
            position: relative;
            width: 360px;
            padding: 30px 20px 0 20px;

        }
        #effeciveViewportIndicator {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
            background: red;
            opacity: .3;
            z-index: 100;
        }

        .highlighter-rouge {
            clear: both;
            padding-top: 34px;
        }

        .scroller {
            position: relative;
            float: left;
            height: 500px;
            background: #eee;
            padding: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            z-index: 10;
        }

        .item {
            display: block;
            background-color: #ccc;
            width: 260px;
            height: 60px;
            border-radius: 5px;
            margin: 30px;
            box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);

        }
        /* The fast way */

        .card {
            box-shadow: 0 1px 2px rgba(0,0,0,0.15);
            position: relative;
            border-radius: 5px;
            -webkit-transform: translateY(0);
            -webkit-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
            transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
            z-index: 100;
        }

        .card:after {
            content: "";
            border-radius: 5px;
            position: absolute;
            background-color: #fff;

            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            box-shadow: 0 8px 17px 0 rgba(0,0,0,0.15),0 6px 20px 0 rgba(0,0,0,0.16);

            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            opacity: 0;
            -webkit-transition: all 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);
            transition: all 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        .card.focus {
            margin: 30px auto;
            -webkit-transform: scale(1.15, 1.15);
            transform: scale(1.15, 1.15);
        }
        /* Transition to showing the bigger shadow on hover */
        .card.focus::after {
            opacity: 1;
        }

        input#expandSizeInput {
            width: 300px;
            height: 30px;
            vertical-align: middle;
            margin-top: -2px;
        }

        label {
            font-weight: 300;
            font-size: 16px;
            height: 30px;
            line-height: 30px;
            padding-right: 10px;
            display: inline-block;
            width: 130px;
            text-align: right;
        }

        #log {
            height: 288px;
            overflow-y: scroll;
            background-color: #eee;
            margin-top: 30px;
            padding-left: 10px;
        }
        #log .red {
            color: red;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="scroller">
            <div class="card item"></div>
            <div class="card item"></div>
            <div class="card item"></div>
            <div class="card item"></div>
            <div class="card item"></div>
            <div class="card item"></div>
            <div class="card item"></div>
            <div class="card item"></div>
            <div class="card item"></div>
            <div class="card item"></div>
            <div class="card item"></div>
            <div class="card item"></div>
            <div class="card item"></div>
            <div class="card item"></div>
            <div class="card item"></div>
            <div class="card item"></div>
            <div class="card item"></div>
            <div class="card item"></div>
            <div class="card item"></div>
            <div class="card item"></div>
            <div class="card item"></div>
            <div class="card item"></div>
            <div class="card item"></div>
            <div class="card item"></div>
            <div class="card item"></div>
            <div class="card item"></div>
            <div class="card item"></div>
        </div>
    </div>
</body>
</html>
官网 https://naver.github.io/egjs-visible/