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;
}

Gestion d'une scrollbar

CSS

Vue hybride

Discussions similaires

Partager

Partager