Scroll horizontal dans un div

**h.thierry** · 25/03/2009, 16h57

Bonjour,
j'ai un div qui devrait scroller pour voir les autres div mais je ne vois que jusqu'à 9. Je pense qu'il ne scroll pas horizontalement car 10, 11, 12 se sont rangés en dessous.
Merci de votre aide.

Le code

Code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
 
<style>
.slider{border:1px solid red; overflow-y:hidden; overflow-x: scroll; width:800px; height:100px;}
.slider div{border:1px solid blue; width:70px; height:70px; float:left; margin:5px;cursor: pointer;}
</style>
 
</head>
 
<body>
<div class="slider">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>

**Macmillenium** · 25/03/2009, 17h29

Bonjour,

Le :

Code :

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

1
2
 
overflow-y:hidden; overflow-x: scroll;

Masque uniquement la scrollbar verticale et ne force pas le scroll horizontale ...
A mes connaissances, il faut passer par le JavaScript.

**crazy_inf** · 25/03/2009, 18h45

Bonsoir !
Et si tu laisses le navigateur se débrouiller en mettant :

Code :

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

overflow:auto;

**h.thierry** · 25/03/2009, 21h42

j'ai déjà essayé de mettre overflow:auto et le navigateur met le scroll-bar vertical et moi je veux que le scroll-bar horizontal.
overflow-y:hidden; overflow-x: scroll; va trés bien mais je pense que c'est les float left qui ne fonctionnent pas trés bien puisque le div "10" passe dessous le div "1" alors qu'il devrait se trouver à droite du div "9"

Merci

**GihefBey** · 25/03/2009, 22h04

Bonjour,

Est-ce qu'un exemple à éplucher pourrait t'aider ?

-

**Dark Ryus** · 02/07/2012, 12h03

Je me permet de réouvrir le sujet car j'ai le même problème :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<div style="width: 200px; height: 25px; overflow-y: hidden; overflow-x: scroll;">
<div id="DIV_ONGLET_1" class="syo_floatLeft" style="border: 1px solid black; border-bottom: 0px; height: 25px; width: 50px; margin-right: 5px;">test</div>
<div id="DIV_ONGLET_2" class="syo_floatLeft" style="border: 1px solid black; border-bottom: 0px; height: 25px; width: 50px; margin-right: 5px;">test</div>
<div id="DIV_ONGLET_3" class="syo_floatLeft" style="border: 1px solid black; border-bottom: 0px; height: 25px; width: 50px; margin-right: 5px;">test</div>
<div id="DIV_ONGLET_4" class="syo_floatLeft" style="border: 1px solid black; border-bottom: 0px; height: 25px; width: 50px; margin-right: 5px;">test</div>
<div id="DIV_ONGLET_5" class="syo_floatLeft" style="border: 1px solid black; border-bottom: 0px; height: 25px; width: 50px; margin-right: 5px;">test</div>
<div id="DIV_ONGLET_6" class="syo_floatLeft" style="border: 1px solid black; border-bottom: 0px; height: 25px; width: 50px; margin-right: 5px;">test</div>
<div id="DIV_ONGLET_7" class="syo_floatLeft" style="border: 1px solid black; border-bottom: 0px; height: 25px; width: 50px; margin-right: 5px;">test</div>
<div id="DIV_ONGLET_8" class="syo_floatLeft" style="border: 1px solid black; border-bottom: 0px; height: 25px; width: 50px; margin-right: 5px;">test</div>
<div id="DIV_ONGLET_PLUS" class="syo_floatLeft syo_pointer" style="border: 1px solid black; border-bottom: 0px; height: 25px; width: 10px; font-size: 20px;" ;="" onclick="ajouterDiametre()"> + </div>
</div>