This translation is incomplete. Please help translate this article from English.

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 tonon-replaced block-level elements and non-replaced inline-block elements
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

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 | 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.
Working Draft Definició inicial.
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é

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,