Gestion d'une scrollbar

**pioupiou35** · 28/12/2013, 20h39

Bonjour tout le monde, je suis nouvelle et étudiante débutante en développement...
Pour créer mon CV en ligne j'ai décidé d'utiliser TextWrangler (gratuit^^) et je n'arrive pas à intégrer une scrollbar (seule une barre grise apparait sans scrolling)...
J'ai pourtant fouiné partout et rien ne marche je ne comprend pas

Voici mon code, si quelqu'un pouvait m'aider je serai vraiment très redevable (il ferait une heureuse

)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<body>
<div id="scroll"> 
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
#scroll
{
    width:30px;
    height:1500px;
    background-color:grey;
    overflow: auto; 
    overflow-y: scroll;
    position: absolute;
    right: 0px;
    border: 3px solid #276D0A;
    cursor: pointer;
}

Je remercie par avance les personnes généreuses qui auront la bonté de me répondre et souhaite de bonnes fêtes à tous les membres!!

**NoSmoking** · 28/12/2013, 22h23

Bonjour et bienvenue sur DVP.
Désolé mais pas compris le problème

Invité · 29/12/2013, 00h28

Bonjour,
Le div fait 1500px de hauteur !
Normal que la barre de scroll soit grisée.
Il faut que la hauteur du texte dépasse les 1500px de haut pour que le scroll s'active.

Diminue à 400px (par ex.) pour voir...

(alors ? Heureuse ?

)

**Tillo** · 29/12/2013, 22h07

Bonsoir,

Désolé mais je ne comprends pas le problème. Chez moi la scrollbar s'affiche automatiquement et si besoin, en fonction de la "hauteur" de ma page.

**rodolphebrd** · 30/12/2013, 08h03

Bonjour,

pouvez fournir plus de code voire le code de la page, vu qu'il y a peu d'éléments.

Les couleurs, c'est pour le draft... rassurez-moi...

Petite mise au point:
D'une manière très généraliste et dans votre cas, pour que la barre de scroll apparaisse il faut réunir la condition suivante:
- la hauteur du bloc parent doit être inférieure à la hauteur du bloc enfant.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="parent">
  <div class="child">
   </div> 
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
.parent{
  height:150px;
  width:500px;
  background:salmon;
  overflow:scroll;
}
.child{
  height:350px;
  width:400px;
  background:silver;
 
}

http://codepen.io/anon/pen/uBIsj

**pioupiou35** · 30/12/2013, 14h27

OUi bien sur que c'est une ébauche ce n'est pas humain d'avoir de si mauvais gouts (des que je fais ma rentrée je le refais sur Dreamweaver et je refais la typo et les couleur intégralement, là c'est uniquement pour m'y retrouver^^)

Grace à votre commentaire je viens de comprendre qqchose de fondamental : il faut 2 div pour créer une scrollbar! (j'ai honte je suis vraiment débutante!)...
Ainsi je vais me débrouiller avec ca (merci merci c'est bete mais merci) et réadapter le code jusqu'a ce que ca marche^^...
Je m'excuse si je vous ai ennuyé par mon manque de don (j'y suis depuis peu mais j'ai réellement envie d'en apprendre plus).

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<body>
<div id="scrollparent">          <!--   Srollbar -->
    <div id="scrollenfant"> 
    </div> 
</div>

Code css :

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
#scrollparent
{
    width:150px;
    height:500px;
    background-color:white;
 position: absolute;
    right: 0px;
    border: 3px solid #276D0A;
    cursor: pointer;
}
 
#scrollenfant
{
    width:3500px;
    height:400px;
    background-color:grey;
   overflow: auto; 
    overflow-y: scroll;
 position: absolute;
    right: 0px;
    border: 3px solid #276D0A;
    cursor: pointer;
}

Invité · 30/12/2013, 14h54

Bonjour,

Envoyé par pioupiou35

...je viens de comprendre qqchose de fondamental : il faut 2 div pour créer une scrollbar!

En fait, non.
Un seul <div> suffit : http://codepen.io/jreaux62/pen/rDykx
Il suffit que le <div> qu'on veut scroller ait une hauteur définie, et que son contenu "dépasse".

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.scrollable{
  height:250px;
  width:500px;
  background:salmon;
  overflow-x:auto; /* affiche la barre de scroll HORIZONTALE SEULEMENT si nécessaire */
  overflow-y:scroll; /* affiche TOUJOURS la barre de scroll VERTICALE */
}

PAR CONTRE, l'intérêt d'une barre de scroll à l'intérieur d'un site (autre que sur le <body>) n'est pas une bonne pratique, surtout avec les tablettes et smartphones (tactiles).
Si tu peux éviter : évite.

N.B. Il n'y a pas de honte à être débutant(e).

**pioupiou35** · 30/12/2013, 15h13

OUi tu as raison je vais éviter tout compte fait...
Mais je vais quand meme consulter ton site pour apprendre comment le faire pour une prochaine fois^^...
Je vous remercie et vous souhaite d'agréables fins de vacances!
Encore merci pour tous vos conseils et solutions^^
Je vais progresser pour moi aussi donner des conseils dans le futur grosses bisessss

Gestion d'une scrollbar

CSS

Discussions similaires

Partager

Partager