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
|
---
title: Элемент.scrollTop
slug: Web/API/Element/scrollTop
translation_of: Web/API/Element/scrollTop
---
<p>{{ APIRef("DOM") }}</p>
<p><code>Свойство<strong> scrollTop</strong></code> считывает или устанавливает количество пикселей, прокрученных от верха элемента. <code>scrollTop</code> измеряет дистанцию от верха элемента до верхней точки видимого контента. Когда контент элемента не создаёт вертикальную прокрутку, его <code>scrollTop</code> равно <code>0</code>.</p>
<h2 id="Syntax_and_values" name="Syntax_and_values">Синтаксис</h2>
<pre class="eval">//Получаем количество прокрученных пикселей
var <var> intElemScrollTop</var> = someElement.scrollTop;
</pre>
<p><var>После выполнения этого кода, </var><code><var>intElemScrollTop</var></code> - целое число пикселей, на которое контент {{domxref("element")}} был прокручен от верха.</p>
<pre class="eval">// Устанавливаем количество прокрученных пикселей
<var>element</var>.scrollTop = <var>intValue</var>;
</pre>
<p><code>scrollTop</code> может быть любым целым числом, с определёнными оговорками:</p>
<ul>
<li>Если элемент не может быть прокручен (т.е. у него нет переполнения или если элемент <strong>не прокручиваем</strong>), <code>scrollTop</code> устанавливается в <code>0</code>.</li>
<li>Если значение меньше <code>0</code>, <code>scrollTop</code> устанавливается в <code>0</code>.</li>
<li>Если установлено значение больше, чем максимум прокручиваемого контента, <code>scrollTop</code> устанавливается в максимум.</li>
</ul>
<h2 id="Example" name="Example">Пример</h2>
<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
<p>Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.</p>
<p>Кот Василий ел картошку.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.</p>
<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
</div>
<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>
<p><img alt="Image:scrollTop.png" class="internal" src="/@api/deki/files/842/=ScrollTop.png"></p>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
<tr>
<td>{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}</td>
<td>{{Spec2("CSSOM View")}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<p>{{Compat("api.Element.scrollTop")}}</p>
<h2 id="Ссылки">Ссылки</h2>
<ul>
<li><a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-element-scrolltop">W3C Draft CSSOM View Module</a></li>
<li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx">MSDN's scrollTop definition</a></li>
<li><a href="http://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx">MSDN's Measuring Element Dimension and Location</a></li>
</ul>
|
