Controllare quando un componente HTML diventa visibile in jQuery

Mattepuffo's logo
Controllare quando un componente HTML diventa visibile in jQuery

Controllare quando un componente HTML diventa visibile in jQuery

Programmazione, Javascript - AJAX

Supponiamo di avere una pagina web con molto contenuto.

E che dobbiamo intercettare quando un componente diventa visibile nel viewport.

Online ci sono diverse alternative; io ho usato un plugin per jQuery: jquery.appear!

Per includerlo nella pagina ho copiato il sorgente e inviato sul server.

Questa la pagina di test:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TEST</title>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"
                integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
                crossorigin="anonymous">
        </script>
        <script src="appear.js"></script>
        <script src="script.js"></script>
        <script>
            $(function () {
                $('#test').appear();

                $(document.body).on('appear', '#test', function (e, $affected) {
                    console.log('OK');
                });

                $(document.body).on('disappear', '#test', function (e, $affected) {
                    console.log('KO');
                });
            });
        </script>
    </head>
    <body>
        <?php for ($i = 0; $i < 60; $i++) {
            echo '<br>';
        }
        ?>
        <section>
            <h3 id="test">Visibile</h3>
        </section>
    </body>
</html>

Tutti queri br li ho messi solo per mandare giù il componente; solo per test in sostanza.

Provate a caricare la pagina e guardare la console!

Enjoy!

Condividi

Commentami!