From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/ca/web/css/overscroll-behavior/index.html | 106 ++++++++++++++++++++++++ 1 file changed, 106 insertions(+) create mode 100644 files/ca/web/css/overscroll-behavior/index.html (limited to 'files/ca/web/css/overscroll-behavior/index.html') diff --git a/files/ca/web/css/overscroll-behavior/index.html b/files/ca/web/css/overscroll-behavior/index.html new file mode 100644 index 0000000000..9ed28a5a0b --- /dev/null +++ b/files/ca/web/css/overscroll-behavior/index.html @@ -0,0 +1,106 @@ +--- +title: overscroll-behavior +slug: Web/CSS/overscroll-behavior +translation_of: Web/CSS/overscroll-behavior +--- +
{{CSSRef}}
+ +

la propietat CSS overscroll-behavior estableix el que fa un navegador quan arriba al límit d'una àrea de desplaçament. És una abreujada per {{cssxref("overscroll-behavior-x")}} i {{cssxref("overscroll-behavior-y")}}.

+ +
/* Keyword values */
+overscroll-behavior: auto; /* default */
+overscroll-behavior: contain;
+overscroll-behavior: none;
+
+/* Two values */
+overscroll-behavior: auto contain;
+
+/* Global values */
+overscroll-behavior: inherit;
+overscroll-behavior: initial;
+overscroll-behavior: unset;
+
+ +

Per defecte, els navegadors mòbils tendeixen a proporcionar un efecte "rebot" o fins i tot una actualització de pàgina quan s'arriba a la part superior o inferior d'una pàgina (o una altra àrea de desplaçament). També us podeu haver adonat que quan tingueu un quadre de diàleg amb contingut de desplaçament a la part superior d'una pàgina de contingut de desplaçament, una vegada s'hagi assolit el límit de desplaçament del quadre de diàleg, la pàgina subjacent començarà a desplaçar-se - això s'anomena scroll chaining (encadenament de desplaçament).

+ +

En alguns casos aquests comportaments no són desitjables. Es pot utilitzar overscroll-behavior per desfer-se de l'encadenament de desplaçament no desitjat i de l'aplicació de Facebook/Twitter inspirada en el comportament de "tirar per a refrescar" del navegador

+ +

Sintaxi

+ +

La propietat overscroll-behavior s'especifica com una o dues paraules clau triades de la llista de valors de sota.

+ +

Dues paraules clau especifican el valor de overscroll-behavior en els eixos x i y respectivament. Si només s'especifica un valor, tant x com y se suposa que tenen el mateix valor.

+ +

Valors

+ +
+
auto
+
El comportament per defecte de desbordament de desplaçament es produeix com a normal.
+
contain
+
El comportament per defecte del desbordament de desplaçament s'observa dins de l'element on aquest valor està establert (p.ex. efectes de "rebot" o refrescos), però no es produeix cap encadenament de desplaçament a les zones veïnes, p.ex. els elements subjacents no es desplaçaran.
+
none
+
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.
+
+ +

Definició formal

+ +

{{cssinfo}}

+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +

Evitar que un element subjacent es desplaci

+ +

En el nostre exemple d'overscroll-behavior example (vegeu també el codi font source code), presentem una llista de pàgines senceres de contactes falsos, i un quadre de diàleg que conté una finestra de xat.

+ +

+ +

Totes dues àrees es desplacen; normalment, si es desplaça la finestra del xat fins a arribar a un límit de desplaçament, la finestra de contactes subjacent començaria a desplaçar-se també, la qual no és desitjable. Això es pot aturar fent servir overscroll-behavior-y (també funciona overscroll-behavior) a la finestra de xat com ara:

+ +
.messages {
+  height: 220px;
+  overflow: auto;
+  overscroll-behavior-y: contain;
+}
+ +

També voldríem desfer-nos dels efectes de desplaçament estàndard quan els contactes es desplacen cap amunt o cap avall (p. ex. Chrome on Android refresca la pàgina quan es desplaça més enllà del límit superior). Això pot evitar-se establint overscroll-behavior: none en l'element {{htmlelement("body")}}:

+ +
body {
+  margin: 0;
+  overscroll-behavior: none;
+}
+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}}{{Spec2('CSS Overscroll Behavior')}}
+ +

Compatibilitat amb el navegador

+ + + +

{{Compat("css.properties.overscroll-behavior")}}

+ +

Veure també

+ + -- cgit v1.2.3-54-g00ecf