Forum d'entraide Crea illusion Fantasy


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 d'entraide Crea illusion Fantasy

Aides, Conseils, Forum, Sites web, blogs, tout supports, Graphismes, Tutoriels, Publicités.


AccueilAccueil  FAQFAQ  PortailPortail  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez|

Scrollbar personnalisée

Voir le sujet précédent Voir le sujet suivant Aller en bas
AuteurMessage
avatar
Messages : 5007
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 10549
Fondatrice
Ptite_Perle
18 - 16
MessageSujet: Scrollbar personnalisée Jeu 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
http://www.creaillusionfantasy.com/
AuteurMessage
avatar
Messages : 524
Venue : 16/05/2013 Je suis : Féminin
Né(e) le : 24/11/1963
Age : 55
Je vie à : Versailles
Humeur : Assez bonne
Mes Points : 1727
Directrice en chef de PUB
Sophie
18 - 16
MessageSujet: Re: Scrollbar personnalisée Ven 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
http://www.entre-nous-pub.com/
AuteurMessage
avatar
Messages : 5007
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 10549
Fondatrice
Ptite_Perle
18 - 16
MessageSujet: Re: Scrollbar personnalisée Sam 2 Juin 2018 - 11:15
Avec plaisir sophie

Amicalement
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
AuteurMessage
Contenu sponsorisé
18 - 16
MessageSujet: Re: Scrollbar personnalisée
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.
» Problème de scrollbar personnalisée (tinyscrollbar) [RESOLU]
» Itineraire personnalisé en sens inverse
» Itinéraire Personnalisé
» Etude personnalisée de Bouygues

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