Controllare quando un componente HTML diventa visibile in jQuery

Controllare quando un componente HTML diventa visibile in jQuery

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!




Share

Commentami!

About Mattepuffo.com

Blog dedicato all'informatica e alla programmazione!
Tutti i contenuti di questo blog, tranne casi particolari, sono sotto licenza Licenza Creative Commons Creative Commons Attribution-Noncommercial-Share Alike 2.5. .

2690 articoli
310 commenti
19 progetti
Altri link
  • About
  • Scrivimi
  • Copyright
  • Sitemap
  • matteo.ferrone@yahoo.it
  • GitHub
  • Privacy Policy