Forum Crea illusion Fantasy
 Scrollbar personnalisée Bannie10

Coucou,

Merci de nous rejoindre sur le forum, j'espère que l'on passera de bons moments ensembles.

Au plaisir de te lire dans les différentes catégories.

Le Staff du forum Crea illusion Fantasy.

Forum Crea illusion Fantasy

#Forum d'entraide, une inscription pour nous rejoindre. Les débutants sont les bienvenu aussi :)


 
Partagez

Scrollbar personnalisée

Voir le sujet précédent Voir le sujet suivant Aller en bas
AuteurMessage
Ptite_Perle
Messages : 4717
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 83299
Fondatrice
Ptite_Perle
MessageSujet: Scrollbar personnalisée  Scrollbar personnalisée EmptyJeu 31 Mai 2018 - 13:17



Voici un exemple de code réalisé en javascript, basé sur jquery, qui permet de remplacer les scrollbars classiques générées par le navigateur en scrollbars customisables avec des styles css et différentes images pour chaque style désiré.

Le principe est de jouer sur la propriété "overflow" des éléments et de remplacer les barres de défilement. Voici un exemple de rendu :

[Vous devez être inscrit et connecté pour voir ce lien]

Implémentation


Il faut dans un premier temps référencer le dossier contenant les éléments à intégrer dans l'exemple :
- les deux scripts jquery
- le script contenant le comportement et le paramétrage relatifs à la mise en place des scrollbars
- la feuille de style contenant les styles css relatifs à la mise en place des scrollbars
- l'ensemble des images utilisée pour la mise en forme des scrollbars

Ensuite dans la page de mise en place des scrollbars il faut faire référence aux différents scripts et à la feuille de style dans la partie du document :
Code:

<link rel="stylesheet" type="text/css" href="jScrollPane.css" media="screen" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jScrollPane.js"></script>
<script type="text/javascript">
$(function(){
   $('#paneOsx').jScrollPane({showArrows:true, scrollbarWidth: 15, arrowSize: 15});
});
</script>

On décrit finalement le code html : deux divisions imbriquées, la division parente ayant une hauteur et largeur fixes :
Code:

<div class="holder osX" style="border:solid 1px black; height:200px; width:350px;">
   <div id="paneOsx" class="scroll-pane">
      <p>
      Exemple de scrollbar adaptée sur une div
      
      Le style de celle-ci est positionnée sur overflow auto.
      
      
      On provoque le dépassement de la hauteur avec du texte
      ...
      
      
      ...
      
      
      ...
      
      Fin du paragraphe affiché.
      </p>
   </div>
</div>
Revenir en haut Aller en bas
AuteurMessage
Sophie
Messages : 503
Venue : 16/05/2013 Je suis : Féminin
Né(e) le : 24/11/1963
Age : 55
Je vie à : Versailles
Humeur : Assez bonne
Mes Points : 46334
Membre
Sophie
MessageSujet: Re: Scrollbar personnalisée  Scrollbar personnalisée EmptyVen 1 Juin 2018 - 21:46
Coucou Perle

Merci pour tout ces renseignements Very Happy
Je vais essayer tout ça !
Revenir en haut Aller en bas
AuteurMessage
Ptite_Perle
Messages : 4717
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 83299
Fondatrice
Ptite_Perle
MessageSujet: Re: Scrollbar personnalisée  Scrollbar personnalisée EmptySam 2 Juin 2018 - 11:15
Avec plaisir sophie

Amicalement
Revenir en haut Aller en bas
AuteurMessage
Contenu sponsorisé
MessageSujet: Re: Scrollbar personnalisée  Scrollbar personnalisée Empty
Revenir en haut Aller en bas

Scrollbar personnalisée

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Sujets similaires

-
» Problème de scrollbar personnalisée.
» Scrollbar appliquée à toutes les barres.
» Scrollbar modification, besoin d'aide
» Pas de scrollbar autour des images trop grandes dans un post
» QEEL scrollbar

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Forum Crea illusion Fantasy :: Caverne d'Alibaba du forum :: Outils Webmasters-