---
title: overflow-y
slug: Web/CSS/overflow-y
tags:
  - CSS
  - CSS Box Model
  - CSS Property
  - Experimental
  - Reference
translation_of: Web/CSS/overflow-y
---
<div>{{CSSRef}}</div>

<p>La propietat <strong><code>overflow-y</code></strong> 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, <span class="short_text" id="result_box" lang="ca"><span>quan es desbordan les vores superior i inferior.</span></span></p>

<pre class="brush:css no-line-numbers">/* 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;
</pre>

<div>{{cssinfo}}</div>

<h2 id="Sintaxi">Sintaxi</h2>

<h3 id="Valors">Valors</h3>

<dl>
 <dt><code>visible</code></dt>
 <dd>El contingut no es retalla i es pot mostrar fora de la caixa de contingut.</dd>
 <dt><code>hidden</code></dt>
 <dd>El contingut es retalla <span class="short_text" id="result_box" lang="ca"><span>i no es proporcionen barres de desplaçament</span></span>.</dd>
 <dt><code>scroll</code></dt>
 <dd>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.</dd>
 <dt><code>auto</code></dt>
 <dd>Depèn de l'agent d'usuari. Els navegadors d'escriptori com Firefox proporcionen barres de desplaçament si el contingut es desborda.</dd>
</dl>

<h3 id="Sintaxi_formal">Sintaxi formal</h3>

{{csssyntax}}

<h2 id="Exemple">Exemple</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;ul&gt;
  &lt;li&gt;&lt;code&gt;overflow-y:hidden&lt;/code&gt; — <span class="short_text" id="result_box" lang="ca"><span>amaga el text fora de la caixa</span></span>
  &lt;div id="div1"&gt;
    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.
    &lt;/div&gt;
  &lt;/li&gt;

  &lt;li&gt;&lt;code&gt;overflow-y:scroll&lt;/code&gt; — afegeix sempre una barra de desplaçament
  &lt;div id="div2"&gt;
    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.
    &lt;/div&gt;
  &lt;/li&gt;

  &lt;li&gt;&lt;code&gt;overflow-y:visible&lt;/code&gt; — mostra el text fora de la caixa, si és necessari
  &lt;div id="div3"&gt;
    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.
    &lt;/div&gt;
  &lt;/li&gt;

  &lt;li&gt;&lt;code&gt;overflow-y:auto&lt;/code&gt; — <span class="short_text" id="result_box" lang="ca"><span>a la majoria de navegadors, equivalent a</span></span> &lt;code&gt;scroll&lt;/code&gt;
  &lt;div id="div4"&gt;
    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.
    &lt;/div&gt;
  &lt;/li&gt;
&lt;/ul&gt;

</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: 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;}
</pre>

<h3 id="Resultat">Resultat</h3>

<figure>
<p>{{EmbedLiveSample("Example", "100%", "780")}}</p>
</figure>

<h2 id="Especificacions">Especificacions</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Overflow', '#propdef-overflow-y', 'overflow-y') }}</td>
   <td>{{ Spec2('CSS3 Overflow') }}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Box', '#overflow-y', 'overflow-y')}}</td>
   <td>{{Spec2('CSS3 Box')}}</td>
   <td>Definició inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Descripció</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.8")}}</td>
   <td>5.0 [*]</td>
   <td>9.5</td>
   <td>3.0</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Descripció</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.5")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[*] <span id="result_box" lang="ca"><span>IE8 va introduir</span></span> <code>-ms-overflow-y</code> <span id="result_box" lang="ca"><span>com a sinònim de</span></span> <code>overflow-y</code>. <span id="result_box" lang="ca"><span>No utilitzeu el prefix</span></span> <code>-ms-</code>.</p>

<h2 id="See_also" name="See_also">Vegeu també</h2>

<ul>
 <li>Propietats CSS relacionades: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-x")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li>
</ul>