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

+La propietat CSS overscroll-behavior-inline estableix el comportament del navegador quan s'arriba al límit de direcció en línia d'una àrea de desplaçament.

+ +

Veure {{cssxref("overscroll-behavior")}} per a una explicació completa.

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

Sintaxi

+ +

La propietat overscroll-behavior-inline s'especifica com una paraula clau triada de la llista de valors de sota.

+ +

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. g. Els efectes "rebot o refrescs), 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 el desplaçament en línia

+ +

En aquesta demostració tenim dues caixes a nivell de bloc, una dins l'altra. La caixa exterior té una gran {{cssxref("width")}} establert en ella de manera que la pàgina es desplaçarà horitzontalment. La caixa interior té una petita amplada (i {{cssxref("height")}}) establerta sobre ella de manera que es troba de manera inexcusable dins de l'àrea de visualització, però el seu contingut té una amplada gran de manera que també es desplaçarà horitzontalment.

+ +

Per defecte, quan la caixa interior es desplaçi i s'arribi 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ó en línia, hem establert overscroll-behavior-inline: contain en la caixa interior.

+ +

HTML

+ +
<main>
+  <div>
+    <div>
+      <p><code>overscroll-behavior-inline</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>
+ +

CSS

+ +
main {
+  height: 400px;
+  width: 3000px;
+  background-color: white;
+  background-image: repeating-linear-gradient(to right, 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-inline: contain;
+}
+
+div > div {
+  height: 100%;
+  width: 1500px;
+  background-color: yellow;
+  background-image: repeating-linear-gradient(to right, 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: 360px;
+  position: relative;
+  top: 10px;
+  left: 10px;
+}
+ +

Result

+ +

{{EmbedLiveSample('Preventing_inline_overscrolling','100%', 500)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior-inline', 'overscroll-behavior-inline')}}{{Spec2('CSS Overscroll Behavior')}}
+ +

Compatibilitat amb el navegador

+ + + +

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

+ +

Veure també

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