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
|
---
title: overscroll-behavior
slug: Web/CSS/overscroll-behavior
tags:
- CSS
translation_of: Web/CSS/overscroll-behavior
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary">CSS-свойство <strong><code>overscroll-behavior</code></strong> — это сокращение для свойств {{cssxref("overscroll-behavior-x")}} и {{cssxref("overscroll-behavior-y")}}, которые позволяют управлять поведением прокрутки при достижении границы области прокрутки.</span></p>
<pre class="brush:css no-line-numbers">/* Значения-ключевые слова */
overscroll-behavior: auto; /* по умолчанию */
overscroll-behavior: contain;
overscroll-behavior: none;
/* Двойное значение */
overscroll-behavior: auto contain;
/* Глобальные значения */
overflow: inherit;
overflow: initial;
overflow: unset;
</pre>
<p>По умолчанию мобильные браузеры, как правило, обеспечивают эффект «отскока» или даже обновляют страницу при достижении её верхней или нижней части (или другой области прокрутки). Возможно, вы также замечали, что когда поверх страницы с прокруткой расположено диалоговое окно с прокруткой, то при достижении границы прокрутки диалогового окна нижележащая страница начинает прокручиваться. Это называется цепочкой прокрутки (scroll chaining, англ.)</p>
<p>В некоторых случаях такое поведение нежелательно. Вы можете использовать <code>overscroll-behavior</code>, чтобы избавиться от нежелательных цепочек прокрутки и поведения страниц браузера по принципу «потяните, чтобы обновить» (pull to refresh, англ.), характерного, например, для приложений Facebook и Twitter.</p>
<p>{{cssinfo}}</p>
<h2 id="Syntax">Синтаксис</h2>
<p>Свойство <code>overscroll-behavior</code> задаётся в виде одного или двух ключевых слов, выбранных из списка значений ниже.</p>
<p>Два ключевых слова определяют значение <code>overscroll-behavior</code> по осям <code>x</code> и <code>y</code> соответственно. Если задано только одно значение, то предполагается, что и <code>x</code>, и <code>y</code> одинаковы.</p>
<h3 id="Values">Значения</h3>
<dl>
<dt><code>auto</code></dt>
<dd>Поведение по умолчанию.</dd>
<dt><code>contain</code></dt>
<dd>Поведение для <code>overscroll-behavior</code> применяется внутри элемента, для которого установлено это значение (например, эффекты «отскока» или обновления), но не возникают цепочки прокрутки для соседних областей прокрутки, например, нижележащие элементы не будут прокручиваться.</dd>
<dt><code>none</code></dt>
<dd>Не происходит цепочки прокрутки в соседних областях прокрутки, и по умолчанию предотвращается достижение границы области прокрутки.</dd>
</dl>
<h3 id="Formal_syntax">Формальный синтаксис</h3>
{{csssyntax}}
<h2 id="Examples">Примеры</h2>
<p>В нашем примере <a href="https://mdn.github.io/css-examples/overscroll-behavior/">overscroll-поведения</a> (см. также код по ссылке <a href="https://github.com/mdn/css-examples/tree/master/overscroll-behavior"></a>) представлен полностраничный список поддельных контактов и диалоговое окно с чатом.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/15778/example.png" style="border-style: solid; border-width: 1px; display: block; height: 622px; margin: 0px auto; width: 350px;"></p>
<p>Обе эти области прокручиваются; обычно, если вы прокручиваете окно чата до тех пор, пока не достигнете границы прокрутки, нижележащее окно контактов тоже начнёт прокручиваться, что нежелательно. Предотвратить такое поведение можно, используя <code>overscroll-behavior-y</code> (<code>overscroll-behavior</code> также подойдет) для окна чата, как показано ниже: </p>
<pre class="brush: css">.messages {
height: 220px;
overflow: auto;
overscroll-behavior-y: contain;
} </pre>
<p>Мы также хотим избавиться от стандартного overscroll-эффекта при прокрутке контактов вверх или вниз (например, Chrome на Android обновляет страницу при прокрутке за пределы верхней границы). Это можно предотвратить, установив для элемента {{htmlelement("body")}} значение <code>overscroll-behavior: none</code>:</p>
<pre class="brush: css">body {
margin: 0;
overscroll-behavior: none;
}</pre>
<h2 id="Specifications">Спецификации</h2>
<p>Пока CSSWG не опубликует свой собственный вариант, спецификация может быть найдена только<a href="https://wicg.github.io/overscroll-behavior/">на Github в репозитории WICG</a>.</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}}</td>
<td>{{Spec2('Overscroll Behavior')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat}}</p>
<h2 id="See_also">См. также</h2>
<ul>
<li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">Take control of your scroll: customizing pull-to-refresh and overflow effects</a></li>
</ul>
<p> </p>
|
