overflow-y

La propietat overflow-y especifica si s'ha de retallar el contingut, mostrar una barra de despla├žament o mostrar el contingut de desbordament d'un element de nivell de bloc, quan es desbordan les vores superior i inferior.

/* El contingut no es retallat */
overflow-y: visible;

/* El contingut es retallat, sense barres despla├žament */
overflow-y: hidden;

/* El contingut es retallat, amb barres despla├žament */
overflow-y: scroll;

/* Deixa que el navegador decideixi */
overflow-y: auto;

/* Valors globals */
overflow-y: inherit;
overflow-y: initial;
overflow-y: unset;
Initial valuevisible
Applies toBlock-containers, flex containers, and grid containers
Inheritedno
Computed valuecom s'especifica, excepte que si overflow-x o b├ę overflow-y s├│n diferents de visible o clip, aquests dos valors computen a auto o hidden respectivament
Animation typediscrete

Sintaxi

Valors

visible
El contingut no es retalla i es pot mostrar fora de la caixa de contingut.
hidden
El contingut es retalla i no es proporcionen barres de despla├žament.
scroll
El contingut es retalla i els exploradors d'escriptori utilitzen barres de despla├žament, independentment que s'hagi retallat o no qualsevol contingut. Aix├▓ evita qualsevol problema amb les barres de despla├žament que apareixen i desapareixen en un entorn din├ámic. Les impressores poden imprimir contingut desbordat.
auto
Dep├Ęn de l'agent d'usuari. Els navegadors d'escriptori com Firefox proporcionen barres de despla├žament si el contingut es desborda.

Sintaxi formal

visible | hidden | clip | scroll | auto

Exemple

HTML

<ul>
  <li><code>overflow-y:hidden</code> ÔÇö amaga el text fora de la caixa
  <div id="div1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li><code>overflow-y:scroll</code> ÔÇö afegeix sempre una barra de despla├žament
  <div id="div2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li><code>overflow-y:visible</code> ÔÇö mostra el text fora de la caixa, si ├ęs necessari
  <div id="div3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li><code>overflow-y:auto</code> ÔÇö a la majoria de navegadors, equivalent a <code>scroll</code>
  <div id="div4">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>
</ul>

CSS

#div1,
#div2,
#div3,
#div4 {
  border: 1px solid black;
  width:  250px;
  height: 100px;
}

#div1 { overflow-y: hidden; margin-bottom: 12px;}
#div2 { overflow-y: scroll; margin-bottom: 12px;}
#div3 { overflow-y: visible; margin-bottom: 120px;}
#div4 { overflow-y: auto; margin-bottom: 120px;}

Resultat

Especificacions

Especificaci├│ Estat Comentari
CSS Overflow Module Level 3
The definition of 'overflow-y' in that specification.
Working Draft  
CSS Basic Box Model
The definition of 'overflow-y' in that specification.
Candidate Recommendation Definici├│ inicial.
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Descripci├│ Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic 1.0 (Yes) 1.5 (1.8) 5.0 [*] 9.5 3.0
Descripci├│ Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic 1.0 (Yes) (Yes) 1.0 (1.5) (Yes) (Yes) (Yes)

[*] IE8 va introduir -ms-overflow-y com a sin├▓nim de overflow-y. No utilitzeu el prefix -ms-.

Vegeu tamb├ę