Créer défilement SCrollBar Vertical sans fin

Version imprimable

15/02/2021, 19h43
OUZFA

Créer défilement SCrollBar Vertical sans fin

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 ?
17/02/2021, 10h13
SpaceFrog

Tu veux remonter en haut de page ou basculer les éléments du haut de page en bas ?
17/02/2021, 10h28
OUZFA

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
17/02/2021, 10h52
SpaceFrog

si les elements contenus dans le div sont déplaçables (blocks) il suffit de les appender dans le div ...
17/02/2021, 10h58
OUZFA

Non ce sont des chiffres (non déplaçables)
17/02/2021, 13h32
SpaceFrog

??
tu peux nous montrer un bout de code ?

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:

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>

17/02/2021, 15h47
SpaceFrog

https://jsfiddle.net/utnkyw7v/
17/02/2021, 19h22
javatwister

Ahhh d'accord! Je n'avais absolument pas compris la demande :aie:
18/02/2021, 09h46
OUZFA

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 ;)

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

Code:

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;

18/02/2021, 17h35
OUZFA

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......)
18/02/2021, 17h58
OUZFA

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.

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

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

Code:

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>

18/02/2021, 19h09
OUZFA

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 ).
18/02/2021, 19h18
javatwister

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;
18/02/2021, 19h24
OUZFA

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
18/02/2021, 20h20
javatwister

Là ça va mieux: http://javatwist.imingo.net/generique2.htm
18/02/2021, 20h29
OUZFA

Bravo javatwister ! C'est exactement ce qu'il me fallait.

Rien à dire :;):lol:

Merci beaucoup et bonne continuation.