Skip to content

Commit 82ac84c

Browse files
authored
Merge pull request #1882 from iamlorddop/master-1
Добавила информацию об объекте options
2 parents 8fb8a51 + bfe9c15 commit 82ac84c

File tree

1 file changed

+50
-1
lines changed
  • 2-ui/1-document/10-size-and-scroll-window

1 file changed

+50
-1
lines changed

2-ui/1-document/10-size-and-scroll-window/article.md

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,36 @@ alert('Текущая прокрутка слева: ' + window.pageXOffset);
109109
<button onclick="window.scrollTo(0,0)">window.scrollTo(0,0)</button>
110110
```
111111
112-
Эти методы одинаково работают для всех браузеров.
112+
В обоих методах вместо координат также может использоваться объект `options`, как аргумент:
113+
114+
```js
115+
window.scrollTo(options);
116+
window.scrollBy(options);
117+
```
118+
119+
`options` поддерживает три свойства:
120+
121+
```js
122+
window.scrollTo({
123+
top: 100,
124+
left: 0,
125+
behavior: "smooth"
126+
});
127+
```
128+
129+
- `top` -- то же самое, что `y`/`pageY`
130+
- `left` -- то же самое, что `x`/`pageX`
131+
- `behavior` -- определяет, каким образом будет прокручиваться страница:
132+
133+
- `"smooth"` -- плавно (не поддерживается в IE и в старых версиях Safari)
134+
- `"instant"` -- мгновенно
135+
- `"auto"` -- определяется браузером (зависит от CSS-свойства [scroll-behavior](https://developer.mozilla.org/ru/docs/Web/CSS/scroll-behavior))
136+
137+
```online
138+
Демонстрация плавной прокрутки страницы:
139+
140+
<button onclick="window.scrollBy({ top: 500, left: 0, behavior: "smooth" })">window.scrollBy({ top: 500, left: 0, behavior: "smooth" })</button>
141+
```
113142
114143
## scrollIntoView
115144
@@ -131,6 +160,26 @@ alert('Текущая прокрутка слева: ' + window.pageXOffset);
131160
<button onclick="this.scrollIntoView(false)">this.scrollIntoView(false)</button>
132161
```
133162
163+
Как и `scrollTo`/`scrollBy`, `scrollIntoView` также принимает объект `options` как аргумент (он немного отличается):
164+
165+
```js
166+
this.scrollIntoView(options).
167+
```
168+
169+
`options` поддерживает три свойства:
170+
171+
```js
172+
this.scrollIntoView({
173+
behavior: "smooth",
174+
block: "end",
175+
inline: "nearest"
176+
});
177+
```
178+
179+
- `behavior` -- анимация прокрутки (`smooth`, `instant`, `auto`)
180+
- `block` -- вертикальное выравнивание (`start`, `center`, `end`, `nearest`). Значение по умолчанию: `start`
181+
- `inline` -- горизонтальное выравнивание (`start`, `center`, `end`, `nearest`). Значение по умолчанию: `nearest`
182+
134183
## Запретить прокрутку
135184
136185
Иногда нам нужно сделать документ "непрокручиваемым". Например, при показе большого диалогового окна над документом – чтобы посетитель мог прокручивать это окно, но не документ.

0 commit comments

Comments
 (0)