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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
---
title: overscroll-behavior-block
slug: Web/CSS/overscroll-behavior-block
translation_of: Web/CSS/overscroll-behavior-block
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary">La propietat CSS <strong><code>overscroll-behavior-block</code></strong> estableix el comportament del navegador quan s'arriba al límit de direcció de bloc d'una àrea de desplaçament.</span></p>
<p>Veure {{cssxref("overscroll-behavior")}} per a una explicació completa.</p>
<pre class="brush:css no-line-numbers notranslate">/* Keyword values */
overscroll-behavior-block: auto; /* default */
overscroll-behavior-block: contain;
overscroll-behavior-block: none;
/* Global values */
overscroll-behavior-block: inherit;
overscroll-behavior-block: initial;
overscroll-behavior-block: unset;
</pre>
<h2 id="Sintaxi">Sintaxi</h2>
<p>La propietat <code>overscroll-behavior-block</code> s'especifica com una paraula clau triada de la llista de valors de sota.</p>
<h3 id="Valors">Valors</h3>
<dl>
<dt><code>auto</code></dt>
<dd>El comportament per defecte de desbordament de desplaçament es produeix com a normal.</dd>
<dt><code>contain</code></dt>
<dd>El comportament per defecte del desbordament de desplaçament s'observa dins de l'element on aquest valor està establert (e.ex. Els efectes "rebot" o refrescs), però no es produeix cap encadenament de desplaçament a les zones veïnes, p.ex. els elements subjacents no es desplaçaran.</dd>
<dt><code>none</code></dt>
<dd>No es produeix cap encadenament de desplaçament a les zones veïnes, i s'impedeix el comportament per defecte de desbordament de desplaçament.</dd>
</dl>
<h2 id="Definició_formal">Definició formal</h2>
<p>{{cssinfo}}</p>
<h2 id="Sintaxi_formal">Sintaxi formal</h2>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<h3 id="Prevenint_el_desplaçament_del_bloc">Prevenint el desplaçament del bloc</h3>
<p>En aquesta demostració tenim dues caixes a nivell de bloc, una dins l'altra. La caixa exterior té una gran {{cssxref("height")}} establert en ella de manera que la pàgina es desplaçarà verticalment. La caixa interior té una petita {{cssxref("width")}} (i <code>height</code>) establerta sobre ella de manera que s'assenta de manera inexcusable dins de l'àrea de visualització, però el seu contingut té una gran <code>height</code> de manera que també es desplaçarà verticalment..</p>
<p>Per defecte, quan la capsa interior es desplaça i s'arriba a un límit de desplaçament, tota la pàgina començarà a desplaçar-se, que probablement no és el que volem. Per evitar que això passi en la direcció del bloc, hem establert <code>overscroll-behavior-block: contain</code> en la caixa interior.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><main>
<div>
<div>
<p><code>overscroll-behavior-block</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p>
</div>
</div>
</main></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">main {
height: 3000px;
width: 500px;
background-color: white;
background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
}
main > div {
height: 300px;
width: 400px;
overflow: auto;
position: relative;
top: 50px;
left: 50px;
overscroll-behavior-block: contain;
}
div > div {
height: 1500px;
width: 100%;
background-color: yellow;
background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
}
p {
padding: 10px;
background-color: rgba(255,0,0,0.5);
margin: 0;
width: 340px;
position: relative;
top: 10px;
left: 10px;
}</pre>
<h4 id="Resultat">Resultat</h4>
<p>{{EmbedLiveSample('Preventing_block_overscrolling','100%', 500)}}</p>
<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('CSS Overscroll Behavior', '#propdef-overscroll-behavior-block', 'overscroll-behavior-block')}}</td>
<td>{{Spec2('CSS Overscroll Behavior')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Compatibilitat_amb_el_navegador">Compatibilitat amb el navegador</h2>
<div class="hidden">La taula de compatibilitat d'aquesta pàgina es genera a partir de dades estructurades. Si es vol contribuir a les dades, consultar <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i enviar una sol·licitud d'extracció.</div>
<p>{{Compat("css.properties.overscroll-behavior-block")}}</p>
<h2 id="Veure_també">Veure també</h2>
<ul>
<li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">Prendre el control del desplaçament: personalitzar els efectes de extreure-per-refrescar i desbordament</a></li>
</ul>
|
