Charger dynamiquement des éléments lorsqu'on scroll à la souris

**tarte-aux-fraises** · 16/06/2017, 18h12

Bonjour à tous,
J'aimerais savoir comment faire pour charger un bout de page et charger le reste dynamiquement lorsqu'on scroll à la souris. J'ai cherché des tutos sur le web mais je n'ai trouvé que des tutos avec JQUERY... Je ne connais pas ce langage, j'ai regardé vite fait je trouve la syntaxe illisible

J'ai cru comprendre que c'est un dérivé de Javascript qui a été simplifié donc je me dis que ça doit être aisément réalisable avec du JS mais je ne sais pas comment m'y prendre

J'ai pensé à définir des seuils en % scrollés sur la page qui déclenchent des fonctions qui ajoutent du contenue au fur et à mesure mais je trouve ça lourd d'autant plus qu'on ne connais pas la résolution de l'utilisateur.
Vous avez une idée ?

**eleydet** · 16/06/2017, 22h28

Bonsoir,

Un peu bizarre, cette idée de rajouter du code lorsqu'on agit sur la molette de la souris. Mais bon. Pourquoi pas?

Fichier index.html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      function ajout_code() {
        script_complementaire=document.createElement("script");
        script_complementaire.src="complement.js";
        document.body.appendChild(script_complementaire);
      }
      onscroll=function() { ajout_code(); };
    </script>
  </head>
  <body>
    <p>Une page permettant de faire fonctionner la molette de la souris...</p>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
  </body>
</html>

Fichier complement.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert("Le script complémentaire est appelé!");

J'ai testé avec Firefox... Je ne suis pas certain que l'événement onscroll s'écrit de la même manière avec l'ensemble des navigateurs.

**danielhagnoul** · 17/06/2017, 11h13

Envoyé par eleydet

[...] Un peu bizarre, cette idée de rajouter du code lorsqu'on agit sur la molette de la souris. Mais bon. Pourquoi pas? [...]

C'est la pire idée qui soit !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
window.addEventListener( "scroll", ev => {
	const script_complementaire = document.createElement( "script" );
	script_complementaire.src = "test7.js"; // un fichier JS quelconque mais valide !
	document.querySelector( "body" ).appendChild( script_complementaire );
});

On ajoute alors des centaines d'éléments "script" car cela se produit sur le "scroll" descendant et sur le "scroll" ascendant !

Ensuite on recommence !

**tarte-aux-fraises** · 17/06/2017, 14h00

Je crois que je me suis mal exprimé

Prenez ce site par exemple : https://chrome.google.com/webstore/category/extensions
Si vous scrollez vers le bas vous verrez que de nouveaux éléments se chargent au fur et à mesure. On est assez loin d'un simple event onscroll.

Charger dynamiquement des éléments lorsqu'on scroll à la souris

JavaScript

Discussions similaires

Partager

Partager