Créer défilement SCrollBar Vertical sans fin

**OUZFA** · 15/02/2021, 19h43

Bonsoir à tous,
je voudrais faire en sorte que lorsque je clique sur la flèche (haut ou bas) d'un ScrollBar vertical dans un DIV, le défilement revienne au début lorsqu'il atteint la fin.

Pourriez-vous m'aider svp ?

**SpaceFrog** · 17/02/2021, 10h13

Tu veux remonter en haut de page ou basculer les éléments du haut de page en bas ?

**OUZFA** · 17/02/2021, 10h28

Salut SpaceFrog,

ce n'est pas une page mais un DIV.

L'idée est que le défilement (dans les deux sens) se fasse en roue libre: lorsque le dernier élément est atteint, le défilement ne s'arrête pas mais il continue à afficher les élément comme dans une cage d'écureuil.

Merci encore

**SpaceFrog** · 17/02/2021, 10h52

si les elements contenus dans le div sont déplaçables (blocks) il suffit de les appender dans le div ...

**OUZFA** · 17/02/2021, 10h58

Non ce sont des chiffres (non déplaçables)

**SpaceFrog** · 17/02/2021, 13h32

??
tu peux nous montrer un bout de code ?

**javatwister** · 17/02/2021, 15h38

Pour l'instant, je ne comprends pas le but de la manoeuvre;

2 options, juste pour dire, dans un code à l'ancienne: http://javatwist.imingo.net/generique.htm

==> Pas de scrollbar mais un bouton actionnant le défilement; cliquer sur une scrollbar une seule fois n'est pas hyper logique;
==> Option haut en bas cyclique
==> Option rebondissement sur le bas et remontada

Code html :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"> 
<title>générique</title>
 
<style>
#cadre1, #cadre2 {display:flex;align-items:center;}
#un,#trois {border:1px solid black;overflow:hidden;width:150px;margin:20px;}
#deux,#quatre {position:relative;top:0px;}
</style>
 
 
</head> 
<body>
 
<div id="cadre1">
	<div id="un">
		<div id="deux">
		Ce message descend progressivement et quand il arrive en bas de son conteneur, il réapparaît progressivement par le haut, puis redescend...
		</div>
	</div>
	<button id="b1">Premier cas</button>
</div>
 
<div id="cadre2">
	<div id="trois">
		<div id="quatre">
		Ce message descend progressivement et quand il arrive en bas de son conteneur, il remonte progressivement jusqu'en haut puis il redescend...
		</div>
	</div>
	<button id="b2">Deuxième cas</button>
</div>
 
 
<script> 
document.addEventListener("DOMContentLoaded",()=>{
        let move,move2;
        let pos=0,y=2,el=document.getElementById("deux");
        let pos2=0,y2=2,el2=document.getElementById("quatre");
 
        document.getElementById("b1").addEventListener("click",()=>{
                if(!move){
                        move=setInterval(()=>{
                                pos+=y;
                                if(pos>el.offsetHeight){
                                        pos=-el.offsetHeight
                                };
                                el.style.top=pos+"px";
                        },50)
                }
                else {clearInterval(move);move=false}
        });
 
 
 
        document.getElementById("b2").addEventListener("click",()=>{
                if(!move2){
                        move2=setInterval(()=>{
                                pos2+=y2;
                                if(pos2<0 || pos2>el2.offsetHeight){
                                        y2*=-1
                                };
                                el2.style.top=pos2+"px";
                        },50)
                }
                else {clearInterval(move2);move2=false}
        })
})
 
</script> 
 
</body> 
</html>

**SpaceFrog** · 17/02/2021, 15h47

https://jsfiddle.net/utnkyw7v/

**javatwister** · 17/02/2021, 19h22

Ahhh d'accord! Je n'avais absolument pas compris la demande

**OUZFA** · 18/02/2021, 09h46

Bonjour javatwister ,
merci de ta réponse que je trouve très intéressante (Premier cas).
Je suis en train d'essayer une modification pour supprimer l'espace blanc entre le texte qui disparaît et le texte qui apparaît, car il y 'aura 5 DIV dont le contenu est un chiffre (de 0 à 4). Je souhaite que les chiffres défilent à espace régulier: pas d'espace blanc entre la disparition du premier (chiffre 0) par le bas et l'apparition du dernier (chiffre 4) par le haut.

Si tu as une idée, cela m'aidera à avancer rapidement.

Merci encore

**javatwister** · 18/02/2021, 12h38

D'accord; là on se rapproche du système SpaceFrog: http://javatwist.imingo.net/generique2.htm

Code html :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"> 
<title>générique</title>
 
<style>
        #un{
        width:50px;
        font-weight:bold;
        font-size:2em;
        background:silver;
        padding:0px 5px 0px 5px;
        border:1px solid black;
        text-align:center;
}
 
#deux{
        border:1px solid red;
        background:black;
        color:white;
}
</style>
 
</head> 
<body>
 
<div id="un">
	<div id="deux">
		<div id="n0">0</div>
		<div id="n1">1</div>
		<div id="n2">2</div>
		<div id="n3">3</div>
		<div id="n4">4</div>
	</div>
</div>
 
<script> 
document.addEventListener("DOMContentLoaded",()=>{
        let move,el=document.getElementById("deux");
        document.getElementById("un").addEventListener("click",(e)=>{
                if(!move){
                        move=setInterval(()=>{
                                        el.insertBefore(el.lastElementChild,el.firstElementChild)
                        },500)
                }
                else {clearInterval(move);move=false;}
        });
})
 
</script> 
 
</body> 
</html>

Ah oui, j'oubliais: on clique pour lancer, on clique pour arrêter;

**OUZFA** · 18/02/2021, 17h35

Salut javatwister,
La première solution que tu m'avais envoyée est plus proche de ce que je souhaite faire.

En gros je veux le même effet de défilement Overflow (classique) mais qui ne s'arrête pas à la fin (ni en haut ni en bas): il enchaîne en boucle tant que je fais tourner la roulette de la souris (La roulette vers le bas donne: 0 1 2 3 4 0 1 2 3 4 0 1 2 3 4....) ou (La roulette vers le haut donne: 0 4 3 2 1 0 4 3 2 1 0 4......)

**OUZFA** · 18/02/2021, 17h58

Finalement j'ai adopté la méthode proposée sur le lien suivant: stackoverflow.com/questions/64534951/creating-an-infinite-scroll-loop-with-div-contents
Elle répond au mieux à ce que je souhaitais (avec modifications pour l'adapter à mon projet).

Merci beaucoup à tous.

**javatwister** · 18/02/2021, 18h29

quelque chose comme ça? (qui marche bien mais seulement à la roulette)

http://javatwist.imingo.net/generique2.htm

Code html :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"> 
<title>générique</title>
 
<style>
 
#roue{
        margin:30px;
        font-weight:bold;
        font-size:2em;
        width:50px;
        border:3px solid red;
        background:black;
        color:white;
        text-align:center;
}
</style>
 
</head> 
<body>
 
	<div id="roue">
		<div id="n0">0</div>
		<div id="n1">1</div>
		<div id="n2">2</div>
		<div id="n3">3</div>
		<div id="n4">4</div>
	</div>
 
<script> 
 
document.getElementById("roue").addEventListener("wheel",(e)=>{
        let el=e.currentTarget;
        e.deltaY > 0 ?  el.insertBefore(el.lastElementChild,el.firstElementChild) :
        el.append(el.firstElementChild)
});
 
</script> 
 
</body> 
</html>

**OUZFA** · 18/02/2021, 19h09

Merci javatwister de l'attention que tu portes à mes questions.

Un petite remarque: ta proposition marche bien dans le sens haut (roulette ver le haut). Néanmoins, lorsque tu fais rouler ver le bas, elle a tendance d'agir sur la barre de défilement de la page entière aussi (elle fait défiler ton essai en même temps que la page).

La proposition que je vous ai envoyée (avec <ul> et <li>) me convient bien. Seulement elle fonctionne uniquement avec la roulette de la souris. si vous m'aidez à la rendre hybride (pour qu'elle fonctionne aussi automatique en boucle en appuyant sur un bouton) ce serait bien gentil à vous. (comme l'exemple que tu m'avait envoyé avec PRIMIER CAS ).

**javatwister** · 18/02/2021, 19h18

J'ai corrigé le pbm de "défilement de page"; j'avais tout bêtement oublié un e.preventDefault()Et pour le "bouton", tu voudrais le principe: "un click = un défilement continu" ou "un click = un déplacement"?
D'ailleurs, il faudrait 2 boutons;

**OUZFA** · 18/02/2021, 19h24

L'idée est d'ajouter l'option "défilement en continu" au clic sur un bouton en gardant l'option "Roulette de souris". Si tu m'aides à faire les deux (défilement en continu" et "déplacement"), tu me sauves vraiment !

Merci beaucoup