IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Créer défilement SCrollBar Vertical sans fin


Sujet :

JavaScript

  1. #1
    Membre du Club
    Homme Profil pro
    Enseignant Chercheur
    Inscrit en
    juillet 2019
    Messages
    79
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Enseignant Chercheur
    Secteur : Industrie

    Informations forums :
    Inscription : juillet 2019
    Messages : 79
    Points : 45
    Points
    45
    Par défaut 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 ?

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 794
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 794
    Points : 64 678
    Points
    64 678
    Billets dans le blog
    1
    Par défaut
    Tu veux remonter en haut de page ou basculer les éléments du haut de page en bas ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  3. #3
    Membre du Club
    Homme Profil pro
    Enseignant Chercheur
    Inscrit en
    juillet 2019
    Messages
    79
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Enseignant Chercheur
    Secteur : Industrie

    Informations forums :
    Inscription : juillet 2019
    Messages : 79
    Points : 45
    Points
    45
    Par défaut
    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

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 794
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 794
    Points : 64 678
    Points
    64 678
    Billets dans le blog
    1
    Par défaut
    si les elements contenus dans le div sont déplaçables (blocks) il suffit de les appender dans le div ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  5. #5
    Membre du Club
    Homme Profil pro
    Enseignant Chercheur
    Inscrit en
    juillet 2019
    Messages
    79
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Enseignant Chercheur
    Secteur : Industrie

    Informations forums :
    Inscription : juillet 2019
    Messages : 79
    Points : 45
    Points
    45
    Par défaut
    Non ce sont des chiffres (non déplaçables)

  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 794
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 794
    Points : 64 678
    Points
    64 678
    Billets dans le blog
    1
    Par défaut
    ??
    tu peux nous montrer un bout de code ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  7. #7
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    3 642
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 3 642
    Points : 5 014
    Points
    5 014
    Par défaut
    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>

  8. #8
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 794
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 794
    Points : 64 678
    Points
    64 678
    Billets dans le blog
    1
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  9. #9
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    3 642
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 3 642
    Points : 5 014
    Points
    5 014
    Par défaut
    Ahhh d'accord! Je n'avais absolument pas compris la demande

  10. #10
    Membre du Club
    Homme Profil pro
    Enseignant Chercheur
    Inscrit en
    juillet 2019
    Messages
    79
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Enseignant Chercheur
    Secteur : Industrie

    Informations forums :
    Inscription : juillet 2019
    Messages : 79
    Points : 45
    Points
    45
    Par défaut
    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

  11. #11
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    3 642
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 3 642
    Points : 5 014
    Points
    5 014
    Par défaut
    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;

  12. #12
    Membre du Club
    Homme Profil pro
    Enseignant Chercheur
    Inscrit en
    juillet 2019
    Messages
    79
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Enseignant Chercheur
    Secteur : Industrie

    Informations forums :
    Inscription : juillet 2019
    Messages : 79
    Points : 45
    Points
    45
    Par défaut
    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......)

  13. #13
    Membre du Club
    Homme Profil pro
    Enseignant Chercheur
    Inscrit en
    juillet 2019
    Messages
    79
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Enseignant Chercheur
    Secteur : Industrie

    Informations forums :
    Inscription : juillet 2019
    Messages : 79
    Points : 45
    Points
    45
    Par défaut
    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.

  14. #14
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    3 642
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 3 642
    Points : 5 014
    Points
    5 014
    Par défaut
    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>

  15. #15
    Membre du Club
    Homme Profil pro
    Enseignant Chercheur
    Inscrit en
    juillet 2019
    Messages
    79
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Enseignant Chercheur
    Secteur : Industrie

    Informations forums :
    Inscription : juillet 2019
    Messages : 79
    Points : 45
    Points
    45
    Par défaut
    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 ).

  16. #16
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    3 642
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 3 642
    Points : 5 014
    Points
    5 014
    Par défaut
    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;

  17. #17
    Membre du Club
    Homme Profil pro
    Enseignant Chercheur
    Inscrit en
    juillet 2019
    Messages
    79
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Enseignant Chercheur
    Secteur : Industrie

    Informations forums :
    Inscription : juillet 2019
    Messages : 79
    Points : 45
    Points
    45
    Par défaut
    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. #18
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    3 642
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 3 642
    Points : 5 014
    Points
    5 014

  19. #19
    Membre du Club
    Homme Profil pro
    Enseignant Chercheur
    Inscrit en
    juillet 2019
    Messages
    79
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Enseignant Chercheur
    Secteur : Industrie

    Informations forums :
    Inscription : juillet 2019
    Messages : 79
    Points : 45
    Points
    45
    Par défaut
    Bravo javatwister ! C'est exactement ce qu'il me fallait.

    Rien à dire :

    Merci beaucoup et bonne continuation.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 2
    Dernier message: 31/07/2019, 15h47
  2. défilement sans fin vers la gauche
    Par floirac dans le forum Flash
    Réponses: 4
    Dernier message: 28/08/2006, 22h22
  3. [SQL SERVER 2000] Fonction utilisateur : boucle sans fin
    Par galinijay dans le forum MS SQL Server
    Réponses: 3
    Dernier message: 30/09/2005, 16h03
  4. []Créer une scrollbar
    Par AsmCode dans le forum VB 6 et antérieur
    Réponses: 2
    Dernier message: 30/09/2005, 09h32
  5. WaitForCompletion sans fin
    Par Brunoo dans le forum DirectX
    Réponses: 3
    Dernier message: 09/09/2004, 18h12

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo