11485 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Un script, c'est bien...mais au scroll c'est mieux !

Bonjour,

Depuis quelques jours je me lance dans le merveilleux monde du javascript, je m'essaye sur un script pour afficher un texte lettre par lettre, jusque là, tout va bien .Et là, je me dit: et si j'essayais de déclencher ce script lorsque l'on tombe dessus en scrollant plus bas dans la page...et là, mon petit niveau débutant se voit dépasser par la syntaxe. Comment le déclencher au scroll à partir de 1500px du haut de la page par exemple, je suis passer par pas mal de chose sans grand succès. Une aide extérieure serait véritablement la bienvenue !
Merci par avance.
Voici le code ...

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="style.css">
		<title>Document</title>
	</head>
	<body>
		<div class="large"></div>
		<p id="display"></p>
		<div class="large"></div>
		<script type="text/javascript" src="script.js"></script>
	</body>
</html>



.large{
	width: 100%;
	height: 1500px;
	background: #d6d6d6;
}

p{
	text-align: center;
	color: #333;
	font-size: 3em;
}




	var txt = 'bla blabla blablabla bla',
			display = document.getElementById('display');

	for(var i = 0, l = txt.length; i < l; i++) {
		(function(i) {
			setTimeout(function() {
				display.innerHTML += txt.charAt(i);
			}, i * 60);
		}(i));
	}

Modifié par Shupps (01 May 2019 - 17:06)
Salut

Exemple d'action lorsque le scroll dépasse 2500 px :

window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible

    // début code du test

    function execute() {
        // votre code
        console.log(`OK`);
    }

    function scrollHandler(ev) {
        // debug, console, touche F12
        // console.log(`scrollY = ${ window.scrollY }`);

        // si scroll supérieur à ma limite
        if (window.scrollY > 2500) {
            
            // exécute l'action
            execute();

            // stop action au scroll
            window.removeEventListener('scroll', scrollHandler, false);
        }
    }

    // action si scroll
    window.addEventListener('scroll', scrollHandler, false);

    // fin code du test

}, {
    capture: false,
    passive: true,
    once: false
});
Salut et un grand merci à toi danielhagnoul, la magie des écouteurs ! Grâce à ton exemple, je comprends mieux le principe.
Sujet clos
Aller à