Personnaliser une scrollbar

Bonjour,

Je m'intéresse à la programmation depuis peu et je suis donc novice. Là, je suis bloquée depuis plusieurs jours et j'aurais souhaité un conseil qui puisse m'aider à avancer...

J'ai une fonctionMarquee.js qui me permet grâce à l'insertion de "marquee", de mettre en mouvement le contenu de ma div. Cette même fonction me permet d'accélérer le défilement du texte en appuyant sur l'input auquel il est rattaché.

Seulement, ma scrollbar n'étant pas très jolie, j'ai voulu la personnaliser et j'ai téléchargé un plugin qui fait appel à la librairie jQuery.

Je ne sais pas comment intégrer ma scrollbar personnalisée à ma fonctionMarquee... Est-ce que je peux la stocker dans une variable?

Merci pour tous vos conseils...

Bonsoir,

J'ai téléchargé le plugin ici : http://manos.malihu.gr/jquery-custom-content-scroller/

le thème que j'ai choisi est "dark-thin".

J'ai déjà adapté ma div à cette nouvelle scrollbar. Seulement, la fonction JS qui permet au contenu de la div de défiler, ne fonctionne plus (sûrement parce que ma fonction ne mentionne pas ma nouvelle scrollbar... mais je ne parviens pas à résoudre ce problème...)

Voici mon code html :

<html lang="fr">
<head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" type="text/css" href="scrollbar1.css">
        <link rel="stylesheet" href="scrollbar2.css">
        <script src="fonctionMarquee.js"></script>
        <script src="Scrollbar.js"></script>
</head>
<body>
        <div id="Slide">
                        <center>
                        <div class="BoutonsGroupe1" id="BoutonsGroupe1">
                        <center>
                        <input type="radio" id="Bouton1" name="Bouton Groupe"></input>
                        <input type="radio" id="Bouton2" name="Bouton Groupe"></input>
                        <input type="radio" id="Bouton3" name="Bouton Groupe"></input>
                        </div>
                        </center> 
<div id="marquee" class="marquee" style="data-duration:50">
        TexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexte
        TexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexte
        TexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexte
        TexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexte
        TexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexte
        TexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexte
        TexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexte
        TexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexte
        TexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexteTexte
        TexteTexteTexteTexteTexte...
        </div>
</html>

Voici ma "fonctionMarquee.js" :

function setMarquee(marquee, duration) {
  var marqueeContent = document.createElement("div");
  marqueeContent.innerHTML = marquee.innerHTML;
  marquee.innerHTML = "";
  marquee.appendChild(marqueeContent);
  var scroll = false;   
  var start = Date.now();
  var now;
  var t = 0;
  var from = 0;
  var to = marqueeContent.offsetHeight - marquee.offsetHeight;
  var BoutonsGroupe1 = document.getElementById("BoutonsGroupe1");
  var Bouton1 = document.getElementById("Bouton1");
  var Bouton2 = document.getElementById("Bouton2");
  var Bouton3 = document.getElementById("Bouton3");
  Bouton1.addEventListener("click", function () {
        var diff = duration * 0.4;
        duration -= diff;
    start += (now - start) * 0.4;
    console.log(now-start);
  });
  marquee.addEventListener("wheel", function () {
        scroll = true;
  });
  document.getElementById("Slide").parentNode.insertBefore(BoutonsGroupe1, Slide.nextSibling);
        function operate() {
        now = Date.now();
        t = (now - start) / duration;
        if (t < 1) {
            if(!scroll) {
                marquee.scrollTop = (to - from) * t + from;
              window.requestAnimationFrame(operate);
            }
        } else {
                marquee.scrollTop = to;
        }
    } operate();
}
Array.prototype.forEach.call(document.querySelectorAll(".marquee"), function (marquee) {
        setMarquee(marquee, parseInt(marquee.getAttribute("data-duration"), 10) * 300);
});

DelphineGi

27 août 2016 à 18:42:20