initial commit

1 files changed, 79 insertions, 0 deletions

diff --git a/files/ru/web/api/element/scrollleft/index.html b/files/ru/web/api/element/scrollleft/index.html
new file mode 100644
index 0000000000..15af642a56
--- /dev/null
+++ b/files/ru/web/api/element/scrollleft/index.html
@@ -0,0 +1,79 @@
+---
+title: Элемент.scrollLeft
+slug: Web/API/Element/scrollLeft
+translation_of: Web/API/Element/scrollLeft
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Свойство <strong><code>scrollLeft</code></strong> получает или устанавливает количество пикселей, на которое контент элемента прокручен влево.</p>
+
+<p>Заметьте, что если свойство {{cssxref("direction")}}: <code>rtl</code> (right-to-left), то <code>scrollLeft</code> равен <code>0, </code>когда скроллбар на его самой правой позиции (с начала прокрученного контента), а затем становится отрицательным по мере прокрутки к концу контента.</p>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Синтаксис</h2>
+
+<pre class="eval">// Получаем количество прокрученных пикселей
+var <var>sLeft</var> = <var>element</var>.scrollLeft;
+</pre>
+
+<p><var>sLeft</var> - целое число, представленное количеством пикселей, на которые элемент был прокручен влево.</p>
+
+<pre class="eval">// Устанавливаем количество прокрученных пикселей
+<var>element</var>.scrollLeft = 10;
+</pre>
+
+<p><code>scrollLeft</code> может быть установлен, как любое целое число, однако:</p>
+
+<ul>
+ <li>Если элемент не может быть прокручен (т.е. у него нет переполнения), <code>scrollLeft</code> устанавливается в 0.</li>
+ <li>Если установили значение меньше 0 (больше 0 при располежении элементов справа налево), <code>scrollLeft</code> устанавливается в 0.</li>
+ <li>Если установлено значение больше, чем максимум прокручиваемого контента, <code>scrollLeft</code> устанавливается в максимум.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;style&gt;
+        #container {
+            border: 1px solid #ccc; height: 100px; overflow: scroll; width: 100px;
+        }
+        #content {
+            background-color: #ccc; width: 250px;
+        }
+    &lt;/style&gt;
+    &lt;script&gt;
+        document.addEventListener('DOMContentLoaded', function () {
+            var button = document.getElementById('slide');
+            button.onclick = function () {
+                document.getElementById('container').scrollLeft += 20;
+            };
+        }, false);
+    &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;div id="container"&gt;
+        &lt;div id="content"&gt;Бла-бла-бла&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;button id="slide" type="button"&gt;Пролистать&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<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-scrollleft', 'scrollLeft')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>