Apparition et disparition d'une scrollbar, Overflow

**Doppleganger** · 22/03/2013, 16h17

Bonjour,
J'aimerais faire en sorte que mon texte apparaisse dans un encadré, et lorsque que je met mon curseur dans cet encadré, une scrollingbar apparaisse pour pouvoir lire la suite du texte.

Donc en gros j'ai fais ça

Code :

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

1
2
madiv{overflow:hidden}
madiv:hover{overflow:auto}

donc en théorie ça marche, ça fait bien ce que je veux.

Le problème c'est lorsque la scrollbar apparait, elle "pousse" le contenus de mon texte.

je vais vous illustrer la chose avec deux screens

http://www.casimages.com/i/130322031918664073.jpg

http://www.casimages.com/i/130322031919571415.jpg

bon j'ai l'air d'un peu chipoté, mais mine de rien ça fait moche lorsque ça bouge comme ça, et lorsque le texte est plus long ça fait vraiment moche.

En espérant recevoir de l'aide de votre part

bonne journée.

**NoSmoking** · 22/03/2013, 20h09

Bonjour,
décale le problème un cran en dessus en encadrant la DIV dans une DIV qui elle masquera la scrollbar et qui sur le hover la laissera apparaître.

**Doppleganger** · 25/03/2013, 10h29

Si j'ai bien compris je dois faire ça?

Code html :

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

1
2
3
<div id="madiv">
<div>MONTEXTEBLABLABLABLABLABLA</div>
</div>

(Je demande car ça ne fonctionne pas, le texte déborde de la page, mais si c'est bien ce que tu voulais dire je vais approfondir et voir si je n'ai pas oublié un détail.)

**NoSmoking** · 25/03/2013, 23h28

Pour le principe, on possède une structure du type

Code html :

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

1
2
3
4
<div id="conteneur">
  <div id="contenu">
  </div>
</div>

c'est le conteneur qui permettra de cacher la scrollbar via un overflow:hidden par exemple.

Maintenant fixons des largeur/hauteur cohérentes

Code :

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

1
2
3
4
5
6
7
8
9
10
#conteneur{
  width:19em;
  height:20em;
  overflow:hidden;
}
#contenu{
  width:20em;
  height:20em;
  overflow-y:scroll;
}

dans ce cas j'utilise l'unité em plus simple à ajuster que les px. Le conteneur fait 1em de moins que le contenu, on ne voit donc pas la scrollbar.

Sur le :hover du conteneur il suffit de supprimer le overflow:hidden.

Code :

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

1
2
3
#conteneur:hover{
  overflow:visible;/* on affiche ce qui ne l'est pas */
}

Une autre alternative serait d'ajuster la largeur du conteneur à celle du contenu.

Code :

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

1
2
3
#conteneur:hover{
  width:20em;
}

cette méthode me semble préférable si le contenu possède une bordure ou une ombre par exemple.

Voilà un petit exemple complet

Code html :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Affichage ScrollBar sur :hover</title>
<meta name="Author" content="NoSmoking">
<style>
html,body {
  margin:1em 2em;
  padding:0;
  font-size:100%;
  font-family:Verdana,Arial;
  background: #F2F2F2;
}
h1{
  color: #60606f;
  text-shadow:1px 1px 0px #FFF;
}
#conteneur{
  width:19em;
  height:20em;
  border:1px solid #CCF;
  overflow:hidden;
  opacity:0.5;
  box-shadow: 0 2px 4px 2px #CCC;
}
#conteneur:hover{
/*  overflow:visible;/* on affiche ce qui ne l'est pas */
  width:20em;
  opacity:1;
}
#contenu{
  width:20em;
  height:20em;
  background:#EEF;
  overflow-y:scroll;
}
#marge{
  margin:.5em;
}
</style>
</head>
<body>
  <h1>Affichage<br>ScrollBar sur :hover</h1>
  <div id="conteneur">
    <div id="contenu">
      <div id="marge">
        <p>Cibos vehementer vehementer solitarum quod propinquantis Isauri per solitarum quae.</p>
        <p>Filius quae clades lapide exilium ab quarto pater quae cruribus vicensimo acti Crateras ad filius per fortunas igitur cum Apollinares suam acti actitata constaret Apollinares locum clades quaedam cum Apollinares.</p>
        <p>Sibi quaesitoresque accusatores militum subditivos accitus quae subsidia imperiale tumor Vrsicinus Caesaris forensibus a subditivos abnuens certamina isdem litteris quorum cerneret agitabantur sibi militum accusatores consociatos sui exhalaret iunxerat iunxerat.</p>
        <p>Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet; illud potius praecipiendum fuit, ut eam diligentiam adhiberemus in amicitiis comparandis, ut ne quando amare inciperemus eum, quem aliquando odisse possemus. Quin etiam si minus felices in diligendo fuissemus, ferendum id Scipio potius quam inimicitiarum tempus cogitandum putabat.
      </div>
    </div>
  </div>
</body>
</html>

Voilà à toi d'adapter à ton besoin.

**Doppleganger** · 26/03/2013, 10h47

Merci pour toutes ces explications

Mais ça ne réponds pas exactement à mon problème.

http://www.casimages.com/i/130326094742520783.jpg

http://www.casimages.com/i/130326094743858294.jpg

On le vois plus clairement ici, le texte se fait compresser par la scrollbar.

Lorsque le visiteur va poser son curseur sur le contenu, et bien la scrollbar va apparaitre de manière totalement brute, et mais plus important il déforme le contenus, graphiquement ça le fait pas, le fait que le texte se décale comme ça c'est vraiment trop laid pour que je puisse laisser passer.

EDIT:
Ah bah enfaite en regardant le morceaux de script que tu ma envoyé ça réponds à mes critères.
Merci ;D

**NoSmoking** · 26/03/2013, 23h51

EDIT:
Ah bah enfaite en regardant le morceaux de script que tu ma envoyé ça réponds à mes critères.
Merci ;D

Ouf! j'ai eu peur d'avoir bossé pour rien

Apparition et disparition d'une scrollbar, Overflow

CSS

Vue hybride

Discussions similaires

Partager

Partager