Π‘ΠΊΡΠΎΠ»Π» html: ΠΡΡΠΈΠ±ΡΡ scrolling | htmlbook.ru
ΠΡΡΠΈΠ±ΡΡ scrolling | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅
ΠΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΡΠ΅ΠΉΠΌΠ° Π½Π΅ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΠΎΡΠ²Π΅Π΄Π΅Π½Π½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ, Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ
ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ. Π Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΡΠ»ΡΡΠ°ΡΡ
, ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
Π½Π°ΡΡΡΠ°ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΡ Π½ΠΈΡ
ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠΊΠ°Π·Π°ΡΡΡΡ. ΠΠ»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ
ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ»ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π°ΡΡΠΈΠ±ΡΡ scrolling.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
<iframe scrolling="auto | no | yes">...</iframe>
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
- auto
- ΠΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ, Π² ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅,
ΠΊΠΎΠ³Π΄Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΡΠ΅ΠΉΠΌΠ° ΠΏΡΠ΅Π²ΡΡΠ°Π΅Ρ Π΅Π³ΠΎ Π²ΠΈΠ΄ΠΈΠΌΡΡ ΡΠ°ΡΡΡ. - no
- ΠΠ°ΠΏΡΠ΅ΡΠ°Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
- yes
- ΠΡΠ΅Π³Π΄Π° Π²ΡΠ·ΡΠ²Π°Π΅Ρ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΠΎΠ±ΡΠ΅ΠΌΠ° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
auto
ΠΡΠΈΠΌΠ΅Ρ
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Π’Π΅Π³ IFRAME, Π°ΡΡΠΈΠ±ΡΡ scrolling</title>
</head>
<body>
<iframe src="tip.html" scrolling="no"></iframe>
</body>
</html>
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ div Π±Π»ΠΎΠΊ Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ?
1. Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ overflow Π² CSS?
2. Π‘Π²ΠΎΠΉΡΡΠ²Π° ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ overflow
3. ΠΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² Π±Π»ΠΎΠΊΠ΅ CSS
4. ΠΡΠΈΠΌΠ΅Ρ div Π±Π»ΠΎΠΊΠ° Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ
Π Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ°Π·Π±Π΅ΡΡΠΌ Π²ΠΎΠΏΡΠΎΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° (div) ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ. ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ CSS. ΠΠ° ΡΡΠΎ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow.
Π ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π΅ overflow
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π² ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΠΊΠΎΠ³Π΄Π° ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π½Π΅ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΈ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΠΎΠ±Π»Π°ΡΡΡ Π±Π»ΠΎΠΊΠ°.
overflow-x — ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ.
overflow-y — ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ.
ΠΠΎΠ΄ CSS
.prokrutkaΒ {
overflow:Β auto;Β /*Β ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΒ Π΄Π»ΡΒ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈΒ ΠΏΠΎΒ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ.Β ΠΠ²ΡΠΎΠΌΠ°ΡΠΎΠΌ,Β Π΅ΡΠ»ΠΈΒ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅Β Π±ΠΎΠ»ΡΡΠ΅Β Π±Π»ΠΎΠΊΠ°Β */
}
Π‘Π²ΠΎΠΉΡΡΠ²Π° ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ overflow
visible — ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π²ΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π΄Π°ΠΆΠ΅ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ.
hidden — ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ±Π»Π°ΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΊΡΡΡΠΎ.
scroll — ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ (y) ΠΈΠ»ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ (x) ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
auto — Π°Π²ΡΠΎΠΌΠ°ΡΠΎΠΌ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π² ΡΠ»ΡΡΠ°Π΅ Π΅ΡΠ»ΠΈ Π±Π»ΠΎΠΊ ΠΌΠ΅Π½ΡΡΠ΅.
Π Π°ΡΡΠΌΠΎΡΡΠΈ ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΠ»Π°ΡΡΠ° CSS. Π width ΠΈ height ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π½ΡΠΆΠ½ΡΠ΅ Π½Π°ΠΌ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ Π±Π»ΠΎΠΊΠ° (Π·Π° Π½ΠΈΡ Π½Π΅ Π±ΡΠ΄Π΅Ρ Π²ΡΡ ΠΎΠ΄ΠΈΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π±Π»ΠΎΠΊΠ°), Π° ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ overflow: auto; Π·Π°Π΄Π°Π΅ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ Π² ΡΠ»ΡΡΠ°Π΅ Π½Π°Π΄ΠΎΠ±Π½ΠΎΡΡΠΈ
ΠΠΎΠ΄ CSS
.prokrutkaΒ {
width:150px;Β /*Β ΡΠΈΡΠΈΠ½Π°Β Π½Π°ΡΠ΅Π³ΠΎΒ Π±Π»ΠΎΠΊΠ°Β */
height:100px;Β /*Β Π²ΡΡΠΎΡΠ°Β Π½Π°ΡΠ΅Π³ΠΎΒ Π±Π»ΠΎΠΊΠ°Β */
background:Β #fff;Β /*Β ΡΠ²Π΅ΡΒ ΡΠΎΠ½Π°,Β Π±Π΅Π»ΡΠΉΒ */
border:Β 1pxΒ solidΒ #C1C1C1;Β /*Β ΡΠ°Π·ΠΌΠ΅ΡΒ ΠΈΒ ΡΠ²Π΅ΡΒ Π³ΡΠ°Π½ΠΈΡΡΒ Π±Π»ΠΎΠΊΠ°Β */
overflow:Β auto;Β /*Β ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΒ Π΄Π»ΡΒ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈΒ ΠΏΠΎΒ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ.Β ΠΠ²ΡΠΎΠΌΠ°ΡΠΎΠΌ,Β Π΅ΡΠ»ΠΈΒ Π±ΠΎΠ»ΡΡΠ΅Β Π±Π»ΠΎΠΊΠ°Β */
}
ΠΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² Π±Π»ΠΎΠΊΠ΅ CSS
ΠΠΎΠΆΠ½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅ ΠΈ ΡΠΈΡΠΈΠ½Π΅. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΎΡΠΈ: overflow-y: scroll; (Π²Π΅ΡΡΠΈΠΊΠ°Π»Ρ) overflow-x: scroll; (Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»Ρ) ΡΠΊΠ°ΠΆΠ΅ΠΌ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ scroll, ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ°.
ΠΠΎΠ΄ HTML ΠΈ CSS
.prokrutkaΒ {
height:150px;Β /*Β Π²ΡΡΠΎΡΠ°Β Π½Π°ΡΠ΅Π³ΠΎΒ Π±Π»ΠΎΠΊΠ°Β */
background:Β #fff;Β /*Β ΡΠ²Π΅ΡΒ ΡΠΎΠ½Π°,Β Π±Π΅Π»ΡΠΉΒ */
border:Β 1pxΒ solidΒ #C1C1C1;Β /*Β ΡΠ°Π·ΠΌΠ΅ΡΒ ΠΈΒ ΡΠ²Π΅ΡΒ Π³ΡΠ°Π½ΠΈΡΡΒ Π±Π»ΠΎΠΊΠ°Β */
overflow-x:Β scroll;Β /*Β ΠΏΡΠΎΠΊΡΡΡΠΊΠ°Β ΠΏΠΎΒ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈΒ */
overflow-y:Β scroll;Β /*Β ΠΏΡΠΎΠΊΡΡΡΠΊΠ°Β ΠΏΠΎΒ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈΒ */
}
ΠΡΠΈΠΌΠ΅Ρ div Π±Π»ΠΎΠΊΠ° Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ
ΠΠΎΠ΄ HTML ΠΈ CSS
<html>
Β Β <head>
Β Β Β Β <title>ΠΡΠΈΠΌΠ΅ΡΒ ΡΠ°Π±ΠΎΡΡΒ CSS</title>
<metaΒ http-equiv=Content-TypeΒ content="text/html;charset=utf-8"><style>
.prokrutkaΒ {
height:Β 200px;Β /*Β Π²ΡΡΠΎΡΠ°Β Π½Π°ΡΠ΅Π³ΠΎΒ Π±Π»ΠΎΠΊΠ°Β */
width:Β 200px;Β /*Β ΡΠΈΡΠΈΠ½Π°Β Π½Π°ΡΠ΅Π³ΠΎΒ Π±Π»ΠΎΠΊΠ°Β */
background:Β #fff;Β /*Β ΡΠ²Π΅ΡΒ ΡΠΎΠ½Π°,Β Π±Π΅Π»ΡΠΉΒ */
border:Β 1pxΒ solidΒ #C1C1C1;Β /*Β ΡΠ°Π·ΠΌΠ΅ΡΒ ΠΈΒ ΡΠ²Π΅ΡΒ Π³ΡΠ°Π½ΠΈΡΡΒ Π±Π»ΠΎΠΊΠ°Β */
overflow-x:Β scroll;Β /*Β ΠΏΡΠΎΠΊΡΡΡΠΊΠ°Β ΠΏΠΎΒ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈΒ */
overflow-y:Β scroll;Β /*Β ΠΏΡΠΎΠΊΡΡΡΠΊΠ°Β ΠΏΠΎΒ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈΒ */
}
</style>Β Β </head>
Β Β <body>
<divΒ class="prokrutka">
ΠΒ ΡΡΡΒ ΠΌΠ½ΠΎΠ³ΠΎ-ΠΌΠ½ΠΎΠ³ΠΎΒ ΡΠ°Π·Π½ΠΎΠ³ΠΎΒ ΡΠ΅ΠΊΡΡΠ°Β ΠΈΒ ΠΏΡΠΎΡΠ΅ΠΉΒ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.Β ΠΒ ΡΡΡΒ ΠΌΠ½ΠΎΠ³ΠΎ-ΠΌΠ½ΠΎΠ³ΠΎΒ ΡΠ°Π·Π½ΠΎΠ³ΠΎΒ ΡΠ΅ΠΊΡΡΠ°Β ΠΈΒ ΠΏΡΠΎΡΠ΅ΠΉΒ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.Β ΠΒ ΡΡΡΒ ΠΌΠ½ΠΎΠ³ΠΎ-ΠΌΠ½ΠΎΠ³ΠΎΒ ΡΠ°Π·Π½ΠΎΠ³ΠΎΒ ΡΠ΅ΠΊΡΡΠ°Β ΠΈΒ ΠΏΡΠΎΡΠ΅ΠΉΒ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.Β ΠΒ ΡΡΡΒ ΠΌΠ½ΠΎΠ³ΠΎ-ΠΌΠ½ΠΎΠ³ΠΎΒ ΡΠ°Π·Π½ΠΎΠ³ΠΎΒ ΡΠ΅ΠΊΡΡΠ°Β ΠΈΒ ΠΏΡΠΎΡΠ΅ΠΉΒ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.Β ΠΒ ΡΡΡΒ ΠΌΠ½ΠΎΠ³ΠΎ-ΠΌΠ½ΠΎΠ³ΠΎΒ ΡΠ°Π·Π½ΠΎΠ³ΠΎΒ ΡΠ΅ΠΊΡΡΠ°Β ΠΈΒ ΠΏΡΠΎΡΠ΅ΠΉΒ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.Β ΠΒ ΡΡΡΒ ΠΌΠ½ΠΎΠ³ΠΎ-ΠΌΠ½ΠΎΠ³ΠΎΒ ΡΠ°Π·Π½ΠΎΠ³ΠΎΒ ΡΠ΅ΠΊΡΡΠ°Β ΠΈΒ ΠΏΡΠΎΡΠ΅ΠΉΒ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.Β ΠΒ ΡΡΡΒ ΠΌΠ½ΠΎΠ³ΠΎ-ΠΌΠ½ΠΎΠ³ΠΎΒ ΡΠ°Π·Π½ΠΎΠ³ΠΎΒ ΡΠ΅ΠΊΡΡΠ°Β ΠΈΒ ΠΏΡΠΎΡΠ΅ΠΉΒ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.Β ΠΒ ΡΡΡΒ ΠΌΠ½ΠΎΠ³ΠΎ-ΠΌΠ½ΠΎΠ³ΠΎΒ ΡΠ°Π·Π½ΠΎΠ³ΠΎΒ ΡΠ΅ΠΊΡΡΠ°Β ΠΈΒ ΠΏΡΠΎΡΠ΅ΠΉΒ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.Β
</div>
Β Β </body>
</html>
ΠΠ΄Π½ΠΎ ΠΈΠ· ΡΠ²ΠΎΠΉΡΡΠ² overflow ΠΌΠΎΠΆΠ½ΠΎ ΡΠ±ΡΠ°ΡΡ, ΡΠΎΠ³Π΄Π° ΠΎΡΡΠ°Π½Π΅ΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΉ ΠΎΡΠΈ, ΡΠ΅Π³ΠΎ Π²ΠΏΠΎΠ»Π½Π΅ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ.
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠ°Π±ΠΎΡΡ ΡΠΊΡΠΈΠΏΡΠ° Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½ΠΈΠΆΠ΅.ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΈΡΡ
ΠΎΠ΄Π½ΠΈΠΊΠΈ
ΠΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠΉ ΠΎΡΠΈ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ ΡΠ±Π΅ΡΠΈΡΠ΅ ΡΡΡΠΎΠΊΡ Π»ΠΈΠ±ΠΎ Ρ overflow-x, Π»ΠΈΠ±ΠΎ Ρ overflow-y.
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅! ΠΠ°Π΄Π΅ΡΡΡ ΡΡΠ°ΡΡΡ Π±ΡΠ»Π° ΠΏΠΎΠ»Π΅Π·Π½Π°!
ΠΡΡΠΈΠ±ΡΡ scrolling | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅
ΠΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΡΠ΅ΠΉΠΌΠ° Π½Π΅ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΠΎΡΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ, Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ
ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ. Π Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΡΠ»ΡΡΠ°ΡΡ
, ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
Π½Π°ΡΡΡΠ°ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΡ Π½ΠΈΡ
ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠΊΠ°Π·Π°ΡΡΡΡ. ΠΠ»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ
ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ»ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π°ΡΡΠΈΠ±ΡΡ scrolling.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
<frame scrolling="auto | no | yes">
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
- auto
- ΠΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ, Π² ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅,
ΠΊΠΎΠ³Π΄Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΡΠ΅ΠΉΠΌΠ° ΠΏΡΠ΅Π²ΡΡΠ°Π΅Ρ Π΅Π³ΠΎ Π²ΠΈΠ΄ΠΈΠΌΡΡ ΡΠ°ΡΡΡ. - no
- ΠΠ°ΠΏΡΠ΅ΡΠ°Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
- yes
- ΠΡΠ΅Π³Π΄Π° Π²ΡΠ·ΡΠ²Π°Π΅Ρ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΠΎΠ±ΡΠ΅ΠΌΠ° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
auto
ΠΡΠΈΠΌΠ΅Ρ
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Π’Π΅Π³ FRAME, Π°ΡΡΠΈΠ±ΡΡ scrolling</title>
</head>
<frameset cols="100,*">
<frame src="left.html" name="leftFrame" noresize scrolling="no">
<frame src="main.html" name="mainFrame">
</frameset>
</html>
Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Π±Π»ΠΎΠΊ Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΠΌ ΡΠ΅ΠΊΡΡΠΎΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΈ HTML
ΠΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΠΉ HTML-Π±Π»ΠΎΠΊ β ΡΡΠΎ Π±Π»ΠΎΠΊ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠ°ΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, ΡΠΏΡΠ°Π²Π° ΠΈ ΡΠ½ΠΈΠ·Ρ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ Π±Π»ΠΎΠΊ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡΡΡ ΠΎΠΊΠΎΠ»ΠΎ 50 ΡΠ»ΠΎΠ², ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ ΡΠ΅ΠΊΡΡ, ΡΠΎΡΡΠΎΡΡΠΈΠΉ ΠΈΠ· 200 ΡΠ»ΠΎΠ², Π² ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠΌ HTML-Π±Π»ΠΎΠΊΠ΅ ΠΏΠΎΡΠ²ΡΡΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΡΡΠΎΠ±Ρ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ Π²ΠΈΠ΄Π΅ΡΡ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ 150 ΡΠ»ΠΎΠ². Π ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠΌ HTML-Π±Π»ΠΎΠΊΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ ΠΏΡΠΎΡΡΠΎ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° Π΅Π³ΠΎ Π³ΡΠ°Π½ΠΈΡΡ.
Π‘ΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΠΉ HTML-Π±Π»ΠΎΠΊ (ΡΠΊΡΠΎΠ»Π» Π΄Π»Ρ ΡΠ°ΠΉΡΠ°) Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ.
ΠΠ°ΠΌ ΠΏΡΠΎΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π° Π·Π°ΡΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS overflow, ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΠ³Π΄Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° Π΅Π³ΠΎ ΠΏΡΠ΅Π΄Π΅Π»Ρ.
ΠΠΎΠ³Π΄Π° ΡΠ΅ΠΊΡΡΠ° Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡΡΡ Π² Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ°, Ρ Π²Π°Ρ Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ²:
- ΠΠ΅ΡΠ΅ΠΏΠΈΡΠΈΡΠ΅ ΡΠ΅ΠΊΡΡ, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΡΡΠ°Π» ΠΊΠΎΡΠΎΡΠ΅.
- ΠΠΎΠ·Π²ΠΎΠ»ΡΡΠ΅, ΡΡΠΎΠ±Ρ ΡΠ΅ΠΊΡΡ Π²ΡΡ ΠΎΠ΄ΠΈΠ» Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΠΈ Π½Π°Π΄Π΅ΠΉΡΠ΅ΡΡ, ΡΡΠΎ ΠΌΠ°ΠΊΠ΅Ρ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ, ΡΡΠΎΠ±Ρ ΡΠΏΡΠ°Π²ΠΈΡΡΡΡ Ρ ΡΡΠΎΠΉ ΡΠΈΡΡΠ°ΡΠΈΠ΅ΠΉ.
- ΠΠ±ΡΠ΅ΠΆΡΡΠ΅ ΡΠ΅ΠΊΡΡ ΡΠ°ΠΌ, Π³Π΄Π΅ ΠΎΠ½ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
- ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ (Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠ° β ΠΎΠ±ΡΡΠ½ΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅), ΡΡΠΎΠ±Ρ Ρ ΠΈΡ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π²Π΅ΡΡ ΡΠ΅ΠΊΡΡ.
ΠΡΡΡΠΈΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ: ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΠΉ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ Π±Π»ΠΎΠΊ. Π’ΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ Π²Π΅ΡΡ ΡΠ΅ΠΊΡΡ, Π° ΠΌΠ°ΠΊΠ΅Ρ ΠΎΡΡΠ°Π½Π΅ΡΡΡ Π±Π΅Π· ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.
HTML ΠΈ CSS Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ:
<div>Π·Π΄Π΅ΡΡ ΡΠ΅ΠΊΡΡ....</div>
overflow: auto; ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ (ΡΠΊΡΠΎΠ»Π»), Π΅ΡΠ»ΠΈ ΡΠ΅ΠΊΡΡ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° Π³ΡΠ°Π½ΠΈΡΡ Π±Π»ΠΎΠΊΠ° div.
ΠΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΡΠΎ ΡΡΠ°Π±ΠΎΡΠ°Π»ΠΎ, ΡΠ°ΠΊΠΆΠ΅ Π½ΡΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° div ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ, ΡΡΠΎΠ±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ±ΡΠ΅Π·Π°ΡΡ ΡΠ΅ΠΊΡΡ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow Ρ auto Π½Π° hidden. ΠΡΠ»ΠΈ Π²Ρ Π½Π΅ ΡΠΊΠ°ΠΆΠ΅ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow, ΡΠΊΡΠΎΠ»Π» Π½Π° ΡΠ°ΠΉΡΠ΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π΅ Π±ΡΠ΄Π΅Ρ, ΠΈ ΡΠ΅ΠΊΡΡ Π±ΡΠ΄Π΅Ρ Π²ΡΡ ΠΎΠ΄ΠΈΡΡ Π·Π° Π³ΡΠ°Π½ΠΈΡΡ Π±Π»ΠΎΠΊΠ° div.
ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π½Π° ΠΌΠ΅Π½ΡΡΠ΅ΠΌ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π΅, ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π²ΠΎΠΊΡΡΠ³ Π½Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠ°.
<p><img src="images/shasta_with_disc.jpg" alt="Shasta playing frisbee" /> </p>
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 400 Π½Π° 509 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΎ Π²Π½ΡΡΡΠΈ Π°Π±Π·Π°ΡΠ°, ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 300 Π½Π° 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
ΠΠ»ΠΈΠ½Π½ΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΎΡΠ΅Π½Ρ ΡΡΡΠ΄Π½ΡΠΌΠΈ Π΄Π»Ρ Π²ΠΎΡΠΏΡΠΈΡΡΠΈΡ, Π½ΠΎ, ΠΏΠΎΠΌΠ΅ΡΠ°Ρ ΠΈΡ Π² Π±Π»ΠΎΠΊ div ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, Π° Π·Π°ΡΠ΅ΠΌ, Π΄ΠΎΠ±Π°Π²Π»ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow (ΠΊΠ°ΠΊ ΡΠΏΠΎΡΠΎΠ± ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΊΡΠΎΠ»Π»), ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ°Π±Π»ΠΈΡΡ Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ Π΄Π°Π½Π½ΡΡ , ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ Π·Π°ΠΉΠΌΡΡ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅,
Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ β ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΡΠ΅ΠΊΡΡ, ΠΏΡΠΎΡΡΠΎ ΠΎΠ±Π΅ΡΠ½ΠΈΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ Π² Π±Π»ΠΎΠΊ div, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΠΈ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow (ΡΠΊΡΠΎΠ»Π» Π²Π½ΡΡΡΠΈ div):
<div><table> <thead> <tr> <th>Name</th> <th>Phone</th> </tr> </thead> <tbody> <tr> <td>Jennifer</td> <td>502-5366</td> </tr> .... </tbody></table></div>
ΠΠ΄Π½Π°ΠΊΠΎ ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΈΠΌΠ΅Π΅Ρ ΠΌΠ΅ΡΡΠΎ ΠΎΠ΄ΠΈΠ½ Π½ΡΠ°Π½Ρ. Π ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ ΡΠ»ΡΡΠ°ΡΡ , ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΊΡΠΎΠ»Π», ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ, ΡΡΠΎ, ΡΡΠΎΠ±Ρ Π΄Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π²ΡΡ ΡΠ°Π±Π»ΠΈΡΡ, Π½ΡΠΆΠ½Ρ Π΄Π²Π΅ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ ΡΡΠΎ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ ΡΠ°Π±Π»ΠΈΡΡ ΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΡΡΠ³ΠΈΠ΅. ΠΠΎ Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°Ρ ΠΏΡΠΎΡΡΠΎ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS3 overflow-x. ΠΡΠΎΡΡΠΎ ΡΠΊΠ°ΠΆΠΈΡΠ΅ Π΄Π»Ρ Π±Π»ΠΎΠΊΠ° div ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow-x: hidden;, ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π±ΡΠ΄Π΅Ρ ΡΠ΄Π°Π»Π΅Π½Π°. ΠΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΎΠ²Π΅ΡΡΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ Ρ ΡΡΠΈΠΌ Ρ Π²Π°Ρ Π½Π΅ ΠΈΡΡΠ΅Π· ΠΈ ΡΠ°ΠΌ ΠΊΠΎΠ½ΡΠ΅Π½Ρ.
<div>
ΠΠ΄Π½Π° Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΈΡΡΠ½Π°Ρ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Firefox Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow Π²ΠΎ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΡΠ΅Π³Π°Ρ ΡΠ°Π±Π»ΠΈΡ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ tbody ΠΈ thead ΠΈΠ»ΠΈ tfoot. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄Π»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ°Π±Π»ΠΈΡΡ, Π° ΡΡΠ΅ΠΉΠΊΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΎΡΡΠ°Π½ΡΡΡΡ ΠΏΡΠΈΠ²ΡΠ·Π°Π½Π½ΡΠΌΠΈ ΠΊ Π½ΠΈΠΌ.
ΠΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π² Firefox, ΡΡΠΎ Π½Π΅ ΠΎΡΠ΅Π½Ρ Ρ ΠΎΡΠΎΡΠΎ, Π½ΠΎ ΡΡΠΎ ΠΏΠΎΠ»Π΅Π·Π½Π°Ρ ΡΡΠ½ΠΊΡΠΈΡ, Π΅ΡΠ»ΠΈ Π²Π°ΡΠΈ ΡΠΈΡΠ°ΡΠ΅Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Firefox. ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ Ρ ΠΈΠΌΠ΅Ρ Π² Π²ΠΈΠ΄Ρ.
<table> <thead> <tr> <th>Name</th> <th>Phone</th> </tr> </thead> <tbody> <tr> <td>Jennifer</td> <td>502-5366</td> </tr> ...
ΠΠ°Π½Π½Π°Ρ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ ΡΡΠ°ΡΡΠΈ Β«HTML Scroll BoxΒ» , ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ Π΄ΡΡΠΆΠ½ΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ.ΡΡ
ΡΠ΅Π»Π΅Π³ΡΠ°ΠΌ ΠΊΠ°Π½Π°Π». ΠΠΎΠ΄ΠΏΠΈΡΠΈΡΡ, Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ!
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π½Π΅ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΡΡ frontend-Ρ ΠΈΡΡΠΎΡΡΠ΅ΠΉ / ΠΠ»ΠΎΠ³ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ Wargaming / Π₯Π°Π±Ρ
ΠΠΎΠ΄ ΠΊΠ°ΡΠΎΠΌ Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ Π±ΡΡΡΡΠΎ ΠΈ Π»Π΅Π³ΠΊΠΎ ΠΎΡΠΎΡΠΌΠΈΡΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ SVG-ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ, Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠ»Π°Π²Π½ΡΠΉ ΡΠΊΡΠΎΠ»Π» Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ CSS-ΠΏΡΠ°Π²ΠΈΠ»Π°, Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ Π½ΠΎΠ²ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΈΡΡ ΡΠ΅ΠΊΡΡ Π½Π° Π½ΠΎΠ²ΡΡ ΡΡΡΠΎΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΈ ΠΎ Π½ΠΎΠ²ΡΡ ΡΠΏΠΎΡΠΎΠ±Π°Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ Π΄Π΅ΠΊΠΎΡΠ°ΡΠΈΠ²Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ ΡΠ΅ΠΊΡΡΠ°.
ΠΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ Π΄Π΅ΠΊΠΎΡΠ°ΡΠΈΠ²Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ ΡΠ΅ΠΊΡΡΠ° (text-decoration-style, text-decoration-color)
Π Firefox ΠΈ Safari ΡΠΆΠ΅ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π΄Π°Π²Π½ΠΎ ΠΏΠΎΡΠ²ΠΈΠ»ΠΈΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π΄Π»Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ Π΄Π΅ΠΊΠΎΡΠ°ΡΠΈΠ²Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΠΊ ΡΠ΅ΠΊΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° text-decoration.
Π ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Ρ text-decoration ΡΡΠ°Π·Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ (ΠΏΡΠΈΡΠ΅ΠΌ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΆΠ΅ ΠΎΡΠ΅Π½Ρ Π΄Π°Π²Π½ΠΎ):
.multiple {
text-decoration: underline overline;
}
ΠΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°ΡΡ ΡΠ²Π΅Ρ Π΄Π»Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ°:
.color {
text-decoration-color: blue;
}
Π ΡΠ°ΠΊΠΆΠ΅ ΡΡΠΈΠ»Ρ Π»ΠΈΠ½ΠΈΠΈ:
.dashed {
text-decoration-style: dashed;
}
.dotted {
text-decoration-style: dotted;
}
.wavy {
text-decoration-style: wavy;
}
Π£ΡΡΠΈΡΠ΅, ΡΡΠΎ Π² Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½ΠΎΠ²ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΎΠ»ΡΠΊΠΎ Π² Firefox ΠΈ, ΡΠ°ΡΡΠΈΡΠ½ΠΎ, Π² Safari. ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠ°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΌΠΎΠΆΠ½ΠΎ Π·Π΄Π΅ΡΡ
ΠΠ»Π°Π²Π½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° CSS (scroll-behaviour)
ΠΠ°Π»ΠΎΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΠΎΠ΅, Π½ΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ scroll-behaviour ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π½Π°ΠΌ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΎΠΉ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΊΡΠΎΠ»Π» Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΏΠ»Π°Π²Π½ΡΠΌ. Π Π°Π±ΠΎΡΠ°Π΅Ρ ΠΊΠ°ΠΊ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ Π² Π½ΡΠΆΠ½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π΅ ΠΏΠΎ ΡΠΊΠΎΡΡΠΌ, ΡΠ°ΠΊ ΠΈ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ JS-ΠΎΠΌ.
body {
scroll-behavior: smooth;
}
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ 3 ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
- smooth β ΠΏΠ»Π°Π²Π½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ°;
- instant β ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ°;
- auto β Π½Π° ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΠΠΎΠ³Π΄Π° Π½ΠΈΠ±ΡΠ΄Ρ (Π½Π°Π΄Π΅ΡΡΡ, ΡΠΎΠ²ΡΠ΅ΠΌ ΡΠΊΠΎΡΠΎ) Π½Π°ΠΌ Π½Π΅ ΠΏΡΠΈΠ΄Π΅ΡΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΏΠΈΡΠ°ΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ Π΄Π»Ρ ΠΏΠ»Π°Π²Π½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π½Π° JS ΠΈΠ»ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡ ΡΡΠΎΡΠΎΠ½Π½ΠΈΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ.
ΠΡΠ»ΠΈ ΠΏΠ»Π°Π²Π½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° Π²Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ΅ΠΌ-ΡΠΎ ΠΊΡΠΈΡΠΈΡΠ½ΡΠΌ, ΡΠΌΠ΅Π»ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ. ΠΡ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ ΠΏΠ»Π°Π²Π½ΡΠΉ ΡΠΊΡΠΎΠ»Π» ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π΅ ΠΏΠΎ ΡΠΊΠΎΡΡΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π²ΡΠ΅Π³ΠΎ ΠΎΠ΄Π½ΠΎΠ³ΠΎ CSS-ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ, Π² Firefox .
ΠΡΠΈΠΌΠ΅Ρ
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (Π±ΡΡΡΡΠΎ ΠΈ Π»Π΅Π³ΠΊΠΎ)
ΠΡΠ΅Π΄ΡΡΠ°Π²ΡΡΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠ΄Π³ΡΡΠΆΠ°Π΅ΠΌΡΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ. Π ΠΏΡΠΈΠΌΠ΅ΡΡ, Π»Π΅Π½ΡΡ Π½ΠΎΠ²ΠΎΡΡΠ΅ΠΉ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ Π²ΡΠ΅ Π½ΠΎΠ²ΡΠ΅ ΠΈ Π½ΠΎΠ²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. Π§ΡΠΎΠ±Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ ΠΌΠ΅Π»ΡΠΊΠ°Π»ΠΈ ΠΏΠ΅ΡΠ΅Π΄ Π³Π»Π°Π·Π°ΠΌΠΈ, Π½Π΅ΠΏΠ»ΠΎΡ ΠΎ Π±ΡΠ»ΠΎ Π±Ρ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΈΡ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅.
ΠΠ°ΠΊ ΡΡΠΎ ΡΠ°ΡΡΠΎ Π΄Π΅Π»Π°Π»ΠΈ ΡΠ°Π½ΡΡΠ΅:
1) Π½Π° ΡΠ΅ΡΠ²Π΅Ρ ΠΏΠΎΡΡΠ»Π°Π΅ΡcΡ Π·Π°ΠΏΡΠΎΡ;
2) ΠΏΠΎΡΠ»Π΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΎΡΠ²Π΅ΡΠ° Π΄Π°Π½Π½ΡΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ Π² ΡΠΊΡΡΡΡΠΉ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π±Π»ΠΎΠΊ;
3) Π±Π»ΠΎΠΊΡ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠ»Π°ΡΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΡΠΎΠΏΠΈΡΠ°Π½Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π΅Π³ΠΎ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ (Π»ΠΈΠ±ΠΎ (ΠΎ, ΡΠΆΠ°Ρ!) Π±Π»ΠΎΠΊ Π°Π½ΠΈΠΌΠΈΡΡΠ΅ΡΡΡ JS-ΠΎΠΌ).
Π’Π°ΠΊ Π²ΠΎΡ, ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΠΏΡΠ½ΠΊΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΈΡΠ°ΡΡ ΠΈΠ·Π±ΡΡΠΎΡΠ½ΡΠΌ, Π²Π΅Π΄Ρ Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΡΠ°ΡΠΎΠ΅ Π΄ΠΎΠ±ΡΠΎΠ΅ CSS-ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ animation. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΠΏΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Π»ΠΈΠ±ΠΎ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ DOM-Π΄Π΅ΡΠ΅Π²Π° (Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΡΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΊΠ»Π°ΡΡΠ° Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΈΠ»ΠΈ ΡΠ°ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°). ΠΠΎΡΡΠΎΠΌΡ, Π²Π°ΠΆΠ½ΠΎ Π½Π΅ Ρ ΡΠ°Π½ΠΈΡΡ Π½Π΅Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ Π² DOM, Π° Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΈΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ.
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.content {
animation: fade-in .4s ease;
}
ΠΠΎΡ ΠΈ Π²ΡΠ΅, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΡΠΎΡΡΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ. ΠΠ»ΡΡΡ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π° ΠΎΡΠ΅Π²ΠΈΠ΄Π½Ρ:
- ΠΡΠΎΠΏΠΈΡΠ°Π² @keyframes ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΡ Π² Π»ΡΠ±ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ CSS Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΠΈΠΏΠΎΠ²ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π²ΡΠ΅ΠΌ Π½ΡΠΆΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ;
- ΠΠ±ΡΠ°ΡΠ΅Π½ΠΈΡ ΠΊ DOM Π² JS Π±ΡΠ΄ΡΡ ΡΠ²Π΅Π΄Π΅Π½Ρ ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡΠΌΡ, ΡΡΠΎ ΠΏΡΠΈ Π±ΠΎΠ»ΡΡΠΎΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ»ΠΈ ΠΈΡΠ΅ΡΠ°ΡΠΈΠΉ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΡΠ½ΠΈΠ·ΠΈΡΡ Π½Π°Π³ΡΡΠ·ΠΊΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠΈΠ½ΡΡ Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π° ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½: Π½ΠΎΠ²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ ΠΌΠΎΠ³ΡΡ Ρ ΡΠ°Π½ΠΈΡΡΡΡ Π² DOM ΠΈ ΠΆΠ΄Π°ΡΡ, ΠΏΠΎΠΊΠ° ΠΌΡ Π½Π°ΠΏΠΎΠ»Π½ΠΈΠΌ ΠΈΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ. ΠΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ ΠΏΡΠΈΠ΄Π΅ΡΡΡ Ρ ΡΠ°Π½ΠΈΡΡ Π½Π° ΡΡΠΎΡΠΎΠ½Π΅ JSβ¦
ΠΠ·ΡΡΠΈΡΡ ΡΠ°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΌΠΎΠΆΠ½ΠΎ Π·Π΄Π΅ΡΡ.
Π Π°Π·ΡΡΠ² ΡΡΡΠΎΠΊΠΈ Π½Π° CSS
ΠΡΠ»ΠΈ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠ΅ΡΠ΅Π½ΠΎΡ ΡΡΡΠΎΠΊΠΈ, Π° Π² HTML Π»Π΅Π·ΡΡ Π½Π΅ Ρ
ΠΎΡΠ΅ΡΡΡ (ΠΈΠ»ΠΈ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ), Π½Π° ΠΏΠΎΠΌΠΎΡΡ ΠΏΡΠΈΠ΄Π΅Ρ CSS. ΠΠ΅ΡΠ²ΠΎΠ΅, ΡΡΠΎ ΠΏΡΠΈΡ
ΠΎΠ΄ΠΈΡ Π² Π³ΠΎΠ»ΠΎΠ²Ρ β Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΡΠ΅Π³ΠΎΠΌ Π²Π½ΡΡΡΠΈ:
.break:after {
content: '<br />';
}
Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ (Π° ΠΌΠΎΠΆΠ΅Ρ, ΠΈ ΠΊ ΡΡΠ°ΡΡΡΡ), Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΠ΅Π³ΠΈ Π² ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π½Π΅Π»ΡΠ·Ρ. ΠΠΎ Π²ΡΡ ΠΎΠ΄ Π΅ΡΡΡ!
.break:after {
content: '\A'; //ΠΊΠΎΠ΄ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠ° ΡΡΡΠΎΠΊΠΈ
white-space: pre; //Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠ΅ΠΊΡΡ Ρ ΡΡΡΡΠΎΠΌ Π²ΡΠ΅Ρ
ΠΏΡΠΎΠ±Π΅Π»ΠΎΠ² ΠΈ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΎΠ², Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½ΡΡ
Π² ΠΊΠΎΠ΄
}
ΠΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ.
SVG Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ
ΠΡΠ»ΠΈ Π²Π°ΠΌ ΠΊΠΎΠ³Π΄Π°-Π½ΠΈΠ±ΡΠ΄Ρ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΠ»ΠΎΡΡ ΠΎΡΠΎΡΠΌΠ»ΡΡΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ SVG-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, Π²Ρ Π·Π½Π°Π΅ΡΠ΅, ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ Π½Π΅ ΡΠ°ΠΊ-ΡΠΎ ΠΏΡΠΎΡΡΠΎ. Π§ΡΠΎΠ±Ρ ΠΎΠ±ΡΠ°ΡΠ°ΡΡΡΡ Π² CSS ΠΊ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΌ SVG-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ Π½Π΅ ΡΠ΅Π³ <img/>, Π° ΠΊΠΎΠ΄ Π²ΡΠ΅Π³ΠΎ SVG-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ΅Π»ΠΈΠΊΠΎΠΌ. ΠΡΠΎ Π΄Π΅Π»Π°Π΅Ρ HTML-ΠΊΠΎΠ΄ ΡΠΆΠ°ΡΠ½ΠΎ Π³ΡΠΎΠΌΠΎΠ·Π΄ΠΊΠΈΠΌ. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π½Π°ΠΌ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ ΠΆΠ΅ΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ Π»Π°ΠΊΠΎΠ½ΠΈΡΠ½ΠΎΡΡΡΡ ΠΊΠΎΠ΄Π° ΡΠ°Π΄ΠΈ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ².
ΠΠΎ! Π£ Π½Π°Ρ Π΅ΡΡΡ Π½Π΅ΠΏΠ»ΠΎΡ Π°Ρ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π° β ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°ΡΡ Π²ΡΠ΅ ΡΡΠΈΠ»ΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΏΡΡΠΌΠΎ Π² SVG:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs>
<style type="text/css">
rect {
fill: blue;
}
rect:hover {
fill: orange;
}
</style>
</defs>
<rect />
<rect />
<rect />
<rect />
</svg>
ΠΠ°Π·Π°Π»ΠΎΡΡ Π±Ρ, Π΅ΡΠ»ΠΈ ΠΌΡ ΠΏΡΠΎΠΏΠΈΡΠ°Π»ΠΈ ΡΡΠΈΠ»ΠΈ Π² ΡΠ°ΠΌΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ, ΡΠΎ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΡΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΠΏΡΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ SVG ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ <img />! ΠΠ΄Π½Π°ΠΊΠΎ, Π½Π΅ Π²ΡΠ΅ ΡΠ°ΠΊ ΠΏΡΠΎΡΡΠΎ. ΠΠΎΠ±Π°Π²Π»Π΅Π½Π½ΡΠ΅ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΡΠΈΠ»ΠΈ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π΅ Π±ΡΠ΄ΡΡ. ΠΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ Ρ ΠΎΠ΄ ΠΊΠΎΠ½Π΅ΠΌ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ SVG Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ <iframe> ΠΈΠ»ΠΈ <object>:
<iframe src="icon.svg"></iframe>
ΠΈΠ»ΠΈ
<object type="image/svg+xml" data="icon.svg"></object>
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΡΠΎ Π½Π΅ ΡΠ°ΠΌΠΎΠ΅ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, Π½ΠΎ ΠΎΠ½ΠΎ ΡΠ²Π½ΠΎ Π»ΡΡΡΠ΅, ΡΠ΅ΠΌ Π·Π°Ρ Π»Π°ΠΌΠ»Π΅Π½Π½Π°Ρ SVG-ΠΊΠΎΠ΄ΠΎΠΌ ΡΡΡΠ°Π½ΠΈΡΠ°. ΠΡΠ»ΠΈ Π²Ρ Π·Π½Π°Π΅ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ ΡΠΏΠΎΡΠΎΠ±, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΠΏΠΎΠ΄Π΅Π»ΠΈΡΠ΅ΡΡ ΠΈΠΌ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ !
UPD. ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Large ΠΏΠΎΠ΄Π΅Π»ΠΈΠ»ΡΡ ΠΊΠ»Π°ΡΡΠ½ΡΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΎΠΏΠΈΡΠ°Π½ΠΎ Π·Π΄Π΅ΡΡ.
ΠΡΠ΅ ΠΎΠ΄Π½ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ exeto.
ΠΡΡΠ°ΡΠΈ, ΠΏΡΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ Π² SVG-ΡΠ°ΠΉΠ» ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈ CSS Π°Π½ΠΈΠΌΠ°ΡΠΈΡ:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs>
<style type="text/css">
@keyframes fill-change {
0% {
fill: blue;
}
50% {
fill: orange;
}
100% {
fill: blue;
}
}
rect {
animation: 2s ease fill-change infinite;
fill: blue;
}
</style>
</defs>
<rect />
<rect />
<rect />
<rect />
<path />
</svg>
ΠΠ°Π΄Π΅ΡΡΡ, ΠΎΠΏΠΈΡΠ°Π½Π½ΡΠ΅ Π·Π΄Π΅ΡΡ Π²Π΅ΡΠΈ ΠΏΠΎΠΊΠ°Π·Π°Π»ΠΈΡΡ Π²Π°ΠΌ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌΠΈ, Π° ΠΊΠΎΠΌΡ-ΡΠΎ Π΄Π°ΠΆΠ΅ ΠΏΡΠΈΠ³ΠΎΠ΄ΡΡΡΡ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅. ΠΠΎ Π½ΠΎΠ²ΡΡ Π²ΡΡΡΠ΅Ρ!
overflow | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | ||
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 3.6 | 1.0+ | 1.0+ | 1.0+ |
ΠΡΠ°ΡΠΊΠ°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ | visible |
---|---|
ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ | ΠΠ΅Ρ |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ | Π Π±Π»ΠΎΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ |
ΠΡΠΎΡΠ΅Π½ΡΠ½Π°Ρ Π·Π°ΠΏΠΈΡΡ | ΠΠ΅ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌΠ° |
Π‘ΡΡΠ»ΠΊΠ° Π½Π° ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ | http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow |
ΠΠ΅ΡΡΠΈΠΈ CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow ΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ
Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΎ ΡΠ΅Π»ΠΈΠΊΠΎΠΌ Π½Π΅ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΈ Π²ΡΡ
ΠΎΠ΄ΠΈΡ Π·Π° ΠΎΠ±Π»Π°ΡΡΡ Π·Π°Π΄Π°Π½Π½ΡΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ².
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
overflow: auto | hidden | scroll | visible | inherit
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
- visible
- ΠΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π²ΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π΄Π°ΠΆΠ΅ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ Π²ΡΡΠΎΡΡ
ΠΈ ΡΠΈΡΠΈΠ½Ρ. - hidden
- ΠΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ±Π»Π°ΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠΊΡΡΡΠΎ.
- scroll
- ΠΡΠ΅Π³Π΄Π° Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
- auto
- ΠΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ.
- inherit
- ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
ΠΡΠΈΠΌΠ΅Ρ
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow</title>
<style>
.layer {
overflow: scroll; /* ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ */
width: 300px; /* Π¨ΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° */
height: 150px; /* ΠΡΡΠΎΡΠ° Π±Π»ΠΎΠΊΠ° */
padding: 5px; /* ΠΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅ΠΊΡΡΠ° */
border: solid 1px black; /* ΠΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠ°ΠΌΠΊΠΈ */
}
</style>
</head>
<body>
<div>
<h3>Duis te feugifacilisi</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ. 1.
Π ΠΈΡ. 1. ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow
ΠΠ±ΡΠ΅ΠΊΡΠ½Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ
[window.]document.getElementById(«elementID»).style.overflow
ΠΡΠ°ΡΠ·Π΅ΡΡ
Internet Explorer Π΄ΠΎ Π²Π΅ΡΡΠΈΠΈ 7.0 Π²ΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ:
- Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ inherit;
- ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π·Π½Π°ΡΠ΅Π½ΠΈΡ overflow Ρ ΠΊΠΎΡΠΎΡΡΡ Π·Π°Π΄Π°Π½Ρ ΠΊΠ°ΠΊ auto ΠΈΠ»ΠΈ scroll Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ ΡΠ»ΠΎΠ²Π½ΠΎ Ρ Π½ΠΈΡ Π·Π°Π΄Π°Π½ΠΎ position: fixed.
Internet Explorer 8:
- Π‘ΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ overflow ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ scroll ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ max-height ΠΈ float ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ ΠΏΡΠΎΠΏΠ°Π΄Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡ ΠΏΡΡΡΠΎΠΉ ΡΠΊΡΠ°Π½.
- ΠΠ»Ρ Π±Π»ΠΎΠΊΠ°, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠΊΠ°Π·Π°Π½Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° float ΠΈ overflow ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ scroll, ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅ΡΡΡ ΡΠΈΡΠΈΠ½Π°, Π·Π°Π΄Π°Π½Π½Π°Ρ ΡΠ΅ΡΠ΅Π· ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ max-width.
- ΠΡΡΠΎΡΠ° Π±Π»ΠΎΠΊΠ° Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ»ΠΎΡΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΡΡΡ Π½Π° Π²ΡΡΠΎΡΡ ΡΠΊΡΠΎΠ»Π±Π°ΡΠ°, Ρ ΠΎΡΡ ΠΏΠΎ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ CSS Π·Π°Π΄Π°Π½Π½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² ΡΠ΅Π±Ρ ΠΈ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
Firefox 3.6 Π½Π΅ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ overflow ΠΊ Π³ΡΡΠΏΠΏΠ°ΠΌ ΡΡΠ΅Π΅ΠΊ ΡΠ°Π±Π»ΠΈΡΡ (<thead>, <tbody>, <tfoot>).
ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ, ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ² ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
ΠΡ Π°Π²ΡΠΎΡΠ°: Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΡΠ»ΠΎΠΆΠ½ΠΎ Π³Π°ΡΠ°Π½ΡΠΈΡΠΎΠ²Π°ΡΡ Ρ ΠΎΡΠΎΡΠΈΠΉ UX ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π½ΠΈΠΈ ΡΡΡΠ°Π½ΠΈΡΡ, Π½ΠΎ, ΠΊ ΡΡΠ°ΡΡΡΡ, CSS ΠΌΠΎΠ΄ΡΠ»Ρ Β«Scroll SnapΒ» Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠΌΠΎΡΡ Π² ΡΡΠΎΠΌ. ΠΠΎΠ΄ΡΠ»Ρ ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΊΠΎΠ½Π΅ΡΠ½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠΊΡΠΎΠ»Π° ΠΏΠΎΡΠ»Π΅ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΠΎΠΌΠΈΠΌΠΎ Π²ΡΠ΅Π³ΠΎ ΠΏΡΠΎΡΠ΅Π³ΠΎ, Π² ΠΌΠΎΠ΄ΡΠ»Π΅ Π΅ΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΠ°Π½ΠΎΡΠ°ΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π² ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ Ρ Β«ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ°ΠΌΠΈΒ». ΠΠΎΠ΄ΡΠ»Ρ CSS Scroll Snap ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΡΠΎ ΡΠΊΡΠΎΠ»ΠΎΠΌ. ΠΠ΅Π΄Π°Π²Π½ΠΎ W3C Π²ΡΠΏΡΡΡΠΈΠ»ΠΈ Scroll Snap ΠΊΠ°ΠΊ Candidate Recommendation Ρ Ρ ΠΎΡΠΎΡΠΎ ΠΏΡΠΎΠ΄ΡΠΌΠ°Π½Π½ΡΠΌΠΈ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡΠΌΠΈ ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ Ρ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠΎΠΌ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°Π·Π±ΠΈΡΠ°ΡΡΡΡ.
Π’Π΅ΡΠΌΠΈΠ½ΠΎΠ»ΠΎΠ³ΠΈΡ Scroll Snap
Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ½ΡΡΡ ΠΌΠΎΡΡ Scroll Snap ΠΈ ΠΏΡΠΈΠ½ΡΠΈΠΏ Π΅Π³ΠΎ ΡΠ°Π±ΠΎΡΡ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π·Π½Π°ΡΡ Π΅Π³ΠΎ ΡΠ΅ΡΠΌΠΈΠ½ΠΎΠ»ΠΎΠ³ΠΈΡ. ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ Π½Π΅Π΄ΠΎΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ΅ΡΠΌΠΈΠ½ΠΎΠ² Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅.
Scroll snap ΠΏΡΠΎΡ ΠΎΠ΄ΠΈΡ Π²Π½ΡΡΡΠΈ snapport ΠΈΠ»ΠΈ scrollport. ΠΠ±Π° ΡΠ΅ΡΠΌΠΈΠ½Π° Π·Π½Π°ΡΠ°Ρ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎ ΠΆΠ΅, ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ Π½Π° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΠΊΡΠΎΠ»Π°. ΠΡΠΎ ΠΎΠ±Π»Π°ΡΡΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΡΠΎΡ ΠΎΠ΄ΠΈΡ scroll snap, ΠΊΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ Π½Π° ΡΠΈΡΡΠ½ΠΊΠ΅ Π²ΡΡΠ΅ (Π²Π½Π΅ΡΠ½ΡΡ ΠΏΡΠ΅ΡΡΠ²ΠΈΡΡΠ°Ρ ΡΠ°ΠΌΠΊΠ°). ΠΠ΅ ΡΠ΅Π»Ρ β ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΡ Π΄Π»Ρ scrollport Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΏΠΎΡΠ»Π΅ Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΈ.
ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ snapport Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ snap area ΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠΌ (-ΠΌΠΈ), ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°ΠΌ ΠΈ Π½ΡΠΆΠ½Ρ. Π ΠΊΠ°ΠΆΠ΄ΠΎΠΉ snap area Π΅ΡΡΡ snap position, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ°ΠΊΠΆΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ΅ΡΠ΅Π· snap position ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ Π»ΠΈΠ½ΠΈΡ ΠΈΠ· ΠΊΡΠ°ΡΠ½ΡΡ ΡΠΎΡΠ΅ΠΊ Π½Π° ΡΠΈΡΡΠ½ΠΊΠ΅ Π²ΡΡΠ΅.
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΊΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΡΠΊΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Ρ Π½ΡΠ»Ρ!
ΠΠ·ΡΡΠΈΡΠ΅ ΠΊΡΡΡ ΠΈ ΡΠ·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ Π²Π΅ΡΡΡΠ°ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ°ΠΉΡΡ Π½Π° HTML5 ΠΈ CSS3
Π£Π·Π½Π°ΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅
ΠΡ ΡΠ°Π·ΠΎΠ±ΡΠ°Π»ΠΈΡΡ Π² ΡΠ΅ΡΠΌΠΈΠ½Π°Ρ , ΡΠ΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΠ°ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΈ ΡΠ·Π½Π°Π΅ΠΌ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΉ ΠΆΠΈΠ·Π½ΠΈ. ΠΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΎ ΡΠ»ΡΡΠ°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ·Π½Π°ΡΡ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ W3C Ρ ΡΠΎΡΠΎΠ³Π°Π»Π΅ΡΠ΅Π΅ΠΉ ΠΈ Π΄Π΅ΠΌΠΎ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅. Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±Π½ΠΎΠ²ΠΈΠ»Π°ΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ Modules August 2017 CR. Π :target Π΄ΠΎΠ»ΠΆΠ½Ρ Π·Π°Π»ΠΎΠΆΠΈΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅.
ΠΠ΅ΠΌΠΎ Scroll Snap
ΠΠ° ΠΌΠΎΠΌΠ΅Π½Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΡΡΠ°ΡΡΠΈ Π΄Π΅ΠΌΠΎ Π½ΠΈΠΆΠ΅ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ Π² Safari 11. ΠΡΡΠ³ΠΈΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π½Π΅ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π½ΠΎΠ²ΡΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ, Π½Π΅ΡΠΌΠΎΡΡΡ Π½Π° Π΄Π°Π½Π½ΡΠ΅ Ρ caniuse ΠΈ Π»ΠΈΡΠ½ΡΠ΅ ΡΠ΅ΡΡΡ.
ΠΡΠΈΠΌΠ΅Ρ Π½ΠΈΠΆΠ΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΡ ΡΠ²ΠΎΠΉΡΡΠ² Π΄Π»Ρ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ CSS Scroll Snap. Π Π½Π΅ΠΌ Π½Π΅Ρ ΠΏΠΎΠ»ΠΈΡΠΈΠ»ΠΎΠ², ΠΌΠ½Π΅ Π½Π΅ ΡΠ΄Π°Π»ΠΎΡΡ Π½Π°ΠΉΡΠΈ ΡΠ°Π±ΠΎΡΠΈΠΉ polyfill, ΠΊΠΎΡΠΎΡΡΠΉ Π±Ρ ΡΠ°Π±ΠΎΡΠ°Π» Ρ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ ΠΎΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠΎΠΌ. Π’Π°ΠΊΠΆΠ΅ Π»ΡΠ±ΠΎΠΉ ΡΠΊΡΠΎΠ» ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅Ρ Π΅ΡΠ΅ ΠΎΠ΄Π½ΠΎ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎΠ΅ CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow.
ΠΠ΅ΠΌΠΎ Π²ΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΎΡΡ Π£ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ snap position. ΠΠ΄Π½Π°ΠΊΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΡ Π₯. ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π½Π΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ Safari 11, Π½ΠΈΠΆΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π° Π·Π°ΠΏΠΈΡΡ Π΄Π΅ΠΌΠΎ.
ΠΠ°Π½Π΅Π»ΠΈ Π°ΠΊΠΊΡΡΠ°ΡΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΡΡΡ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π΅ΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½Π°Ρ ΡΠΎΡΠΊΠ°, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΈΠΌΠΏΡΠ»ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π±Π΅ΡΠ΅Ρ Π²Π΅ΡΡ ΠΈ ΠΏΠ΅ΡΠ΅ΠΏΡΡΠ³ΠΈΠ²Π°Π΅Ρ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ Π±Π»ΠΎΠΊΡ. ΠΡΡΡΡΠΎ, Π΄Π°? ΠΡΠΎΡΠΎΠ΅ Π΄Π΅ΠΌΠΎ, Π³Π΄Π΅ ΠΎΡΡ Π£ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΏΠΎΠΊΠ°Π·Π° Π³Π°Π»Π΅ΡΠ΅ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
ΠΠΎ ΠΌΠ΅ΡΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΈΠΌΠΏΡΠ»ΡΡ Π΄ΠΎΡΡΠΈΠ³Π°Π΅Ρ ΡΠΎΡΠΊΠΈ Π½Π΅Π²ΠΎΠ·Π²ΡΠ°ΡΠ° scrollport ΠΈ snap area, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π‘Π²ΠΎΠΉΡΡΠ²Π° ΠΈ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ scroll snap
ΠΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΠΎΠ±ΡΡΡΠ½Π΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ², ΠΈΡ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ° ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ.
Π ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ scroll snap Π²ΡΠ΅Π³ΠΎ 4 ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ³ΡΠ°Π΅Ρ Π²Π°ΠΆΠ½ΡΡ ΡΠΎΠ»Ρ. ΠΡΠΈ 4 ΡΠ²ΠΎΠΉΡΡΠ²Π°β¦
scroll-snap-type
scroll-snap-align
scroll-padding
scroll-margin
Π Π°Π·Π±Π΅ΡΠ΅ΠΌ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, Π³Π΄Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΠΈ ΠΊΠ°ΠΊΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ.
scroll-snap-type
ΠΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΈΠΏ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° β scroll snap container ΠΈΠ»ΠΈ snapport β ΡΡΡΠΎΠ³ΠΎΡΡΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΠΎΡΡ. ΠΡΠ»ΠΈ ΡΡΡΠΎΠ³ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π΅ Π·Π°Π΄Π°Π½ΠΎ, ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΡΡΡ proximity. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π΄ΡΡΠ³ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΏΠΎΠΌΠΎΠ³Π°ΡΡΠ΅Π΅ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ snap axis. ΠΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ 2 Π·Π½Π°ΡΠ΅Π½ΠΈΡ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, scroll-snap-type: y mandatory). Π ΡΠ°ΠΊΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ snap-type ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΡΠΈ Π£ ΠΈ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ mandatory.
Scroll Snap Axis: x, y, block, inline ΠΈΠ»ΠΈ both
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΊΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΡΠΊΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Ρ Π½ΡΠ»Ρ!
ΠΠ·ΡΡΠΈΡΠ΅ ΠΊΡΡΡ ΠΈ ΡΠ·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ Π²Π΅ΡΡΡΠ°ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ°ΠΉΡΡ Π½Π° HTML5 ΠΈ CSS3
Π£Π·Π½Π°ΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅
x: ΡΠΊΡΠΎΠ» ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΠΈΠΊΡΠΈΡΡΠ΅Ρ snap position ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΎΡΠΈ
y: ΡΠΊΡΠΎΠ» ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΠΈΠΊΡΠΈΡΡΠ΅Ρ snap position ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΠΎΡΠΈ
block: ΡΠΊΡΠΎΠ» ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΠΈΠΊΡΠΈΡΡΠ΅Ρ snap position ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎ ΠΎΡΠΈ Π±Π»ΠΎΠΊΠ°
inline: ΡΠΊΡΠΎΠ» ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΠΈΠΊΡΠΈΡΡΠ΅Ρ snap position ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎ ΠΈΠ½Π»Π°ΠΉΠ½ ΠΎΡΠΈ
both: ΡΠΊΡΠΎΠ» ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΠΈΠΊΡΠΈΡΡΠ΅Ρ snap position ΠΏΠΎ ΠΎΠ±Π΅ΠΈΠΌ ΠΎΡΡΠΌ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ (ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΠΎ ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°ΡΡΡ ΠΊ ΡΠ°Π·Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΎΡΠΈ)
Scroll Snap Strictness: none, proximity ΠΈ mandatory
none: Π΅ΡΠ»ΠΈ Π·Π°Π΄Π°Π½ Π½Π° ΡΠΊΡΠΎΠ» ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅, ΡΠΎ ΡΠΊΡΠΎΠ» ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ
proximity: Π΅ΡΠ»ΠΈ Π·Π°Π΄Π°Π½ Π½Π° ΡΠΊΡΠΎΠ» ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅, ΡΠΎ ΡΠΊΡΠΎΠ» ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΏΡΠΈΠ²ΡΠ·Π°Π½ ΠΊ snap position, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ Π½Π΅Ρ Π°ΠΊΡΠΈΠ²Π½ΡΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΡΠ»ΠΈ Π΄ΠΎΡΡΡΠΏΠ½Π°Ρ snap position ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ, ΡΠΎΠ³Π΄Π° ΡΠΊΡΠΎΠ» ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠΈΡΡΡΡ ΠΏΠΎ Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ (Π΅ΡΠ»ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π½Π΅Ρ, ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π½Π΅ Π±ΡΠ΄Π΅Ρ)
mandatory: Π΅ΡΠ»ΠΈ Π·Π°Π΄Π°Π½ Π½Π° ΡΠΊΡΠΎΠ» ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅, ΡΠΊΡΠΎΠ» ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°ΡΡΡΡ ΠΊ snap position Π² ΠΌΠΎΠΌΠ΅Π½Ρ Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
scroll-snap-align
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ scroll-snap-align Π·Π°Π΄Π°Π΅Ρ snap position ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΠΊΠ°ΠΊ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π΅Π³ΠΎ snap area (ΠΊΠ°ΠΊ ΠΎΠ±ΡΠ΅ΠΊΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ) Π²Π½ΡΡΡΠΈ snapport ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° (ΠΊΠ°ΠΊ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ). ΠΠ²Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΏΠΎ ΠΈΠ½Π»Π°ΠΉΠ½ ΠΎΡΠΈ ΠΈ Π±Π»ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΎΡΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ. ΠΡΠ»ΠΈ Π·Π°Π΄Π°Π½ΠΎ ΠΎΠ΄Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, Π²ΡΠΎΡΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄ΡΠ±Π»ΠΈΡΡΠ΅ΡΡΡ. ΠΡΠΈΠ½ΠΈΠΌΠ°Π΅ΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ none, center, start ΠΈ end.
ΠΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ Π΄Π»Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΊΡΠΎΠ» ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΈ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ 2 Π·Π½Π°ΡΠ΅Π½ΠΈΡ. ΠΠ΅ΡΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ β ΠΎΡΡ Π₯, Π²ΡΠΎΡΠΎΠ΅ β ΠΎΡΡ Π£. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, scroll-snap-align: start center.
None: ΡΠ°ΠΊΠΎΠΉ Π±Π»ΠΎΠΊ Π½Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ snap position ΠΏΠΎ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ ΠΎΡΠΈ.
Start: Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ snap area ΡΠΊΡΠΎΠ»Π° Π±Π»ΠΎΠΊΠ° Π²Π½ΡΡΡΠΈ snapport ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° β ΡΡΠΎ snap position ΠΏΠΎ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ ΠΎΡΠΈ
End: ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ snap area ΡΠΊΡΠΎΠ»Π° Π±Π»ΠΎΠΊΠ° Π²Π½ΡΡΡΠΈ snapport ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° β ΡΡΠΎ snap position ΠΏΠΎ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ ΠΎΡΠΈ
Center: ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ snap area ΡΠΊΡΠΎΠ»Π° Π±Π»ΠΎΠΊΠ° Π²Π½ΡΡΡΠΈ snapport ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° β ΡΡΠΎ snap position ΠΏΠΎ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ ΠΎΡΠΈ
scroll-padding
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ scroll-padding Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ ΡΠ΄Π²ΠΈΠ³ΠΈ. ΠΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ, Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΡΠΌΠ΅Π½ΡΡΠ°Π΅ΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠ°Ρ ΠΎΠ±Π»Π°ΡΡΡ, ΡΡΠΈΡΠ°ΡΡΠ°ΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΌΠ°ΠΊΠ΅Ρ, ΠΎΠ±Π»Π°ΡΡΡ ΡΠΊΡΠΎΠ»Π°, Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π½Π° Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ 2 ΡΠΎΡΠΌΡ: ΠΏΠ΅ΡΠ²Π°Ρ ΠΏΠΎΡ ΠΎΠΆΠ° Π½Π° ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ padding, ΠΈ Π΄Π»ΠΈΠ½Π½Π°Ρ Π²Π΅ΡΡΠΈΡ scroll-padding-top ΠΈ scroll-padding-bottom, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ.
scroll-margin
ΠΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ±ΠΎΠΉ Π²Π½Π΅ΡΠ½ΠΈΠ΅ Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΎΠ±ΡΡΠ²Π»Π΅Π½Π½ΡΠ΅ Π΄Π»Ρ ΡΠΊΡΠΎΠ» ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ snap area, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π΄Π»Ρ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΊ snapport. Π Π°Π±ΠΎΡΠ°Π΅Ρ ΠΊΠ°ΠΊ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ margin, ΠΊΠ°ΠΊ ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½Π°Ρ ΡΠ°ΠΊ ΠΈ Π΄Π»ΠΈΠ½Π½Π°Ρ Π²Π΅ΡΡΠΈΡ scroll-margin-top ΠΈ scroll-margin-bottom.
ΠΠ°ΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΌΡΡΠ»ΠΈ
ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ Π² editorβs draft ΠΏΡΠΈΠ²Π΅Π»ΠΈ ΠΊ ΡΡ ΡΠ΄ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ, Π½Π° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ, ΠΊΠ°ΠΊ Ρ ΡΠΆΠ΅ Π³ΠΎΠ²ΠΎΡΠΈΠ», Π½Π΅Ρ ΡΠ°Π±ΠΎΡΠΈΡ ΠΏΠΎΠ»ΠΈΡΠΈΠ»ΠΎΠ². ΠΡΡΡ Π²Π΅ΡΠΎΡΡΠ½ΠΎΡΡΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ scroll-snap-stop Π±ΡΠ΄Π΅Ρ ΡΠ΄Π°Π»Π΅Π½ΠΎ Π² CR. Π― ΡΠ°ΠΊΠΆΠ΅ Π²ΡΡΡΠ½ΠΈΠ», ΡΡΠΎ min-height ΡΠ΅ΠΉΡΠ°Ρ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΠΊΠΎΠ³Π΄Π° Π·Π°Π΄Π°Π½ΠΎ Π½Π° scroll snap ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅. ΠΠΎΠΆΠ΅Ρ, Π΅ΡΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΎ ΡΡ ΠΎΠΆΠΈΠΌ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ΠΌ. ΠΡΠ»ΠΈ Π·Π½Π°Π΅ΡΠ΅ ΡΠ°ΠΊΠΈΠ΅, ΠΎΡΡΠ°Π²Π»ΡΠΉΡΠ΅ ΠΈΡ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ .
ΠΡΠΎ Π±Π΅Π³Π»ΡΠΉ ΠΎΠ±Π·ΠΎΡ CSS Scroll snap. Π‘ΡΠΎΠΈΡ ΠΎΠ½ΠΎ ΡΠΎΠ³ΠΎ? ΠΡΠ΄Π΅Ρ ΠΎΠ½ Π²Π°ΠΌ ΠΏΠΎΠ»Π΅Π·Π΅Π½? ΠΠ»ΠΈ Π΅Π³ΠΎ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ Π² ΡΠ°ΠΌΡΠ΅ ΡΠ΅ΠΌΠ½ΡΠ΅ ΡΠ³ΠΎΠ»ΠΊΠΈ Π³Π°Π»Π°ΠΊΡΠΈΠΊΠΈ, Π³Π΄Π΅ Π΅Π³ΠΎ Π½ΠΈΠΊΡΠΎ Π½Π΅ Π½Π°ΠΉΠ΄Π΅Ρ? ΠΡΡΠ°Π²Π»ΡΠΉΡΠ΅ ΠΎΡΠ²Π΅ΡΡ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ . Π ΠΊΠ°ΠΊ Π²ΡΠ΅Π³Π΄Π°, Ρ ΠΎΡΠΎΡΠΎ ΠΏΠΎΠΊΠΎΠ΄ΠΈΡΡ!
ΠΠ²ΡΠΎΡ: Dennis Gaebel
ΠΡΡΠΎΡΠ½ΠΈΠΊ: https://webdesign.tutsplus.com/
Π Π΅Π΄Π°ΠΊΡΠΈΡ: ΠΠΎΠΌΠ°Π½Π΄Π° webformyself.
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΊΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΡΠΊΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Ρ Π½ΡΠ»Ρ!
ΠΠ·ΡΡΠΈΡΠ΅ ΠΊΡΡΡ ΠΈ ΡΠ·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ Π²Π΅ΡΡΡΠ°ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ°ΠΉΡΡ Π½Π° HTML5 ΠΈ CSS3
Π£Π·Π½Π°ΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅
PSD to HTML
ΠΡΠ°ΠΊΡΠΈΠΊΠ° Π²Π΅ΡΡΡΠΊΠΈ ΡΠ°ΠΉΡΠ° Π½Π° CSS Grid Ρ Π½ΡΠ»Ρ
Π‘ΠΌΠΎΡΡΠ΅ΡΡ
HTML-ΠΏΡΠΎΠΊΡΡΡΠΊΠ°
ΠΠΎΠ»Π΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ HTML — ΡΡΠΎ ΠΏΠΎΠ»Π΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΊΠΎΠ³Π΄Π° Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π²Π΅Π»ΠΈΠΊΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡΡΡ Π² ΠΏΠΎΠ»Π΅. ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠΎΡΠΎΠ±ΠΊΡ? ΠΡ ΡΠΎΠ·Π΄Π°Π΅ΡΠ΅ ΠΏΠΎΠ»Π΅, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΎΠ±ΡΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ HTML (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ div
). ΠΠ°ΡΠ΅ΠΌ, ΡΡΠΎΠ±Ρ ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π»ΠΎΡΡ, Π²Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS overflow
ΠΊ div.
ΠΠΎ Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡΡΡΡ ΠΎ ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΡ Π΄Π΅ΡΠ°Π»ΡΡ , Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ Ρ ΠΎΡΠΈΡΠ΅. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΈ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ HTML.ΠΠΎΠ½Π΅ΡΠ½ΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΡΠ²Π΅Ρ ΠΈ Ρ. Π.)
ΠΡΠΎΡΡΠ°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° HTML
ΠΠΎΡΠΎΠ±ΠΊΠΈ Π΄Π»Ρ ΡΠ²Π΅ΡΠ½ΡΡ ΡΠ²ΠΈΡΠΊΠΎΠ²
ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΠΎΠ»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ HTML Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½ΡΠΌ ΡΠ²Π΅ΡΠΎΠΌ.Π£ Π²Π°Ρ Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ° Π² ΠΏΠΎΠ»Π΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. Π©Π΅Π»ΠΊΠ½ΠΈΡΠ΅ ΡΡΡΠ»ΠΊΡ, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²Π΅Ρ Π² ΠΏΠΎΠ»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ!
ΠΠΎΠ»ΡΡΠ΅ ΡΠ²Π΅ΡΠ½ΡΡ ΡΠ²ΠΈΡΠΊΠΎΠ² β
ΠΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΡΠ΅ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ WebKit Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΏΠΎΠ»ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.Π’Π°ΠΊΠΆΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ ΠΏΠΎΠ»ΠΎΡΠ°ΠΌΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ° (ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΏΡΠΎΡΠΌΠΎΡΡ ).
<ΡΡΠΈΠ»Ρ>
/ * ΠΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΏΠΎΠ»ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ° * /
body {
Π½ΠΈΠΆΠ½ΡΡ ΠΌΠ°ΡΠΆΠ°: 200%;
}
/ * Π‘ΡΠΈΠ»ΠΈ Π±ΠΎΠΊΡΠΎΠ² * /
.myBox {
Π³ΡΠ°Π½ΠΈΡΠ°: Π½Π΅Ρ;
ΠΎΡΡΡΡΠΏ: 5 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΡΠΈΡΡ: 24px / 36px Π±Π΅Π· Π·Π°ΡΠ΅ΡΠ΅ΠΊ;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: ΠΏΡΠΎΠΊΡΡΡΠΊΠ°;
}
/ * Π‘ΡΠΈΠ»ΠΈ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ * /
:: — webkit-scrollbar {
ΡΠΈΡΠΈΠ½Π°: 12 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 12 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
:: — webkit-scrollbar-track {
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½Π°Ρ ΠΆΠ΅Π»ΡΠΎ-Π·Π΅Π»Π΅Π½Π°Ρ 1px;
ΡΠ°Π΄ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
:: — webkit-scrollbar-thumb {
ΡΠΎΠ½: ΠΆΠ΅Π»ΡΠΎ-Π·Π΅Π»Π΅Π½ΡΠΉ;
ΡΠ°Π΄ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
:: — webkit-scrollbar-thumb: hover {
ΡΠΎΠ½: # 88ba1c;
}
ΠΠΎΠ»ΡΡΠ΅ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΡ ΠΏΠΎΠ»ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ β
ΠΡΠΎΠΊΡΡΡΠΊΠ° Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π»ΠΈΠ±ΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π»ΠΈΠ±ΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠ΅ΡΠ΅Π΄Π½Π΅Π³ΠΎ ΠΏΠ»Π°Π½Π°. Π©Π΅Π»ΠΊΠ½ΠΈΡΠ΅ ΡΡΡΠ»ΠΊΡ, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ!

ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΠΎΠ»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ β
ΠΡΠ°Π½ΠΈΡΡ ΡΠ°ΠΌΠΊΠΈ Π΄Π»Ρ ΡΠ²ΠΈΡΠΊΠ°
ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΠΎΠ»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ HTML Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½ΠΎΠΉ ΡΠ°ΠΌΠΊΠΎΠΉ.Π©Π΅Π»ΠΊΠ½ΠΈΡΠ΅ ΡΡΡΠ»ΠΊΡ, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ°ΠΌΠΊΡ ΠΊ ΠΏΠΎΠ»ΠΎΡΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ!
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π³ΡΠ°Π½ΠΈΡΡ ΠΏΠΎΠ»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ β
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ°
ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΠΎΠ»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ HTML ΡΠΎΠ»ΡΠΊΠΎ Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ. Π©Π΅Π»ΠΊΠ½ΠΈΡΠ΅ ΡΡΡΠ»ΠΊΡ, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ Π² ΠΏΠΎΠ»Π΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ!
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ overflow-x, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΊΠΎΠ³Π΄Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΡΠΎΠ³ΠΎ div ΡΠΈΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.ΠΡΠ»ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π°Π±Π·Π°ΡΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ 200 ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ², ΠΎΠ½ Π±ΡΠ΄Π΅Ρ Π½Π° 200 ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ² ΡΠΈΡΠ΅, ΡΠ΅ΠΌ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, ΡΡΠΎ ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ.
ΠΠΎΠ»ΡΡΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ β
.
css — ΠΡΠΎΠΊΡΡΡΠΈΡΠ΅ Π΄ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ html
ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΡΠ΅ΠΊΠ°
- ΠΠΊΠΎΠ»ΠΎ
ΠΡΠΎΠ΄ΡΠΊΡΡ
- ΠΠ»Ρ ΠΊΠΎΠΌΠ°Π½Π΄
ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΡΠ΅ΠΊΠ°
ΠΠ±ΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠ΅ Π²ΠΎΠΏΡΠΎΡΡ ΠΈ ΠΎΡΠ²Π΅ΡΡΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΡΠ΅ΠΊΠ° Π΄Π»Ρ ΠΊΠΎΠΌΠ°Π½Π΄
ΠΠ΄Π΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΈ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈ Π΄Π΅Π»ΡΡΡΡ ΡΠ°ΡΡΠ½ΡΠΌΠΈ Π·Π½Π°Π½ΠΈΡΠΌΠΈ Ρ ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌΠΈΠΠ°ΠΊΠ°Π½ΡΠΈΠΈ
ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ Ρ Π½ΠΈΠΌ ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΊΠ°ΡΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΡΡΠ°Π’Π°Π»Π°Π½Ρ
ΠΠ°Π½ΠΈΠΌΠ°ΠΉΡΠ΅ ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΡΡΠΎΠ² ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ²ΠΎΠΉ Π±ΡΠ΅Π½Π΄ ΡΠ°Π±ΠΎΡΠΎΠ΄Π°ΡΠ΅Π»ΡΠ Π΅ΠΊΠ»Π°ΠΌΠ°
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ΡΡ ΠΊ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΠΈ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³Π°ΠΌ ΡΠΎ Π²ΡΠ΅Π³ΠΎ ΠΌΠΈΡΠ°- Π ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ
.
css — ΠΠ°ΠΊ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² ΡΠ°Π±Π»ΠΈΡΠ΅ html
ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΡΠ΅ΠΊΠ°
- ΠΠΊΠΎΠ»ΠΎ
ΠΡΠΎΠ΄ΡΠΊΡΡ
- ΠΠ»Ρ ΠΊΠΎΠΌΠ°Π½Π΄
ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΡΠ΅ΠΊΠ°
ΠΠ±ΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠ΅ Π²ΠΎΠΏΡΠΎΡΡ ΠΈ ΠΎΡΠ²Π΅ΡΡΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΡΠ΅ΠΊΠ° Π΄Π»Ρ ΠΊΠΎΠΌΠ°Π½Π΄
ΠΠ΄Π΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΈ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈ Π΄Π΅Π»ΡΡΡΡ ΡΠ°ΡΡΠ½ΡΠΌΠΈ Π·Π½Π°Π½ΠΈΡΠΌΠΈ Ρ ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌΠΈΠΠ°ΠΊΠ°Π½ΡΠΈΠΈ
ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ Ρ Π½ΠΈΠΌ ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΊΠ°ΡΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΡΡΠ°Π’Π°Π»Π°Π½Ρ
ΠΠ°Π½ΠΈΠΌΠ°ΠΉΡΠ΅ ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΡΡΠΎΠ² ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ²ΠΎΠΉ Π±ΡΠ΅Π½Π΄ ΡΠ°Π±ΠΎΡΠΎΠ΄Π°ΡΠ΅Π»ΡΠ Π΅ΠΊΠ»Π°ΠΌΠ°
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ΡΡ ΠΊ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΠΈ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³Π°ΠΌ ΡΠΎ Π²ΡΠ΅Π³ΠΎ ΠΌΠΈΡΠ°- Π ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ
ΠΠ°Π³ΡΡΠ·ΠΊΠ°β¦
.
12 CSS Scroll Effects
ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°Π½Π½ΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ HTML ΠΈ CSS ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΊΠΎΠ΄Π°. ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΠΌΠ°ΡΡΠΎΠ²ΡΠΊΠΎΠΉ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ 2019 Π³ΠΎΠ΄Π°. 5 Π½ΠΎΠ²ΠΈΠ½ΠΎΠΊ.
- CSS Parallax Effects
- ΠΠ»Π°Π³ΠΈΠ½Ρ ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ jQuery Parallax
ΠΠ²ΡΠΎΡ
- ΠΠ΅Π½ΡΠΈ ΠΠ°ΡΠ·Π°
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅ΡΠ΅ΠΊΡΡΡΠΈΠ΅ ΠΏΡΠΎΡΠΈΠ»Π΅ΠΉ
ΠΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡΠ°ΡΡΡ ΡΠ°ΡΡΡ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠ΅ΠΉ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠ°Π½Π½Π΅Ρ Π±Π΅Π· ΠΏΠΎΠ»Π΅ΠΉ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΠ½Π΄ΡΠ΅ΠΉ Π¨Π°ΡΠ°ΠΏΠΎΠ²
Π ΠΊΠΎΠ΄Π΅
CSS Scroll-Behavior: Smooth
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΠ½Π΄ΡΠ΅ΠΉ Π¨Π°ΡΠ°ΠΏΠΎΠ²
Π ΠΊΠΎΠ΄Π΅
CSS ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΡΠΈΠΏ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΈ ΡΠ΅ΠΆΠΈΠΌ ΡΠΌΠ΅ΡΠΈΠ²Π°Π½ΠΈΡ
Π‘Π²ΠΎΠΉΡΡΠ²Π° CSS scroll-behavior ΠΈ scroll-snap-type
— ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΅Π»Π΅Π²ΡΡ
ΡΡΡΠ°Π½ΠΈΡ Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ js.Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, ΡΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠΎΠΊΠ° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π½Π΅ Π²ΠΎ Π²ΡΠ΅Ρ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- Π Π°ΠΉΠ°Π½ ΠΠ°Π»Π»ΠΈΠ³Π°Π½
Π ΠΊΠΎΠ΄Π΅
CSS Scroll Reveal Sections
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ clip-path
Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°Π·Π΄Π΅Π»ΠΎΠ² Π³Π΅ΡΠΎΠ΅Π² Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- Mert Cukuren
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ
- HTML / CSS (SCSS) / JavaScript (Babel)
Π ΠΊΠΎΠ΄Π΅
ΠΡΠΎΡΡΠ°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
ΠΡΠΎΡΡΠ°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² HTML, CSS ΠΈ JS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΡΠΎΠ½ΠΊΠ° Π Π°ΡΠ»Ρ
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ
- HTML / CSS (SCSS) / JavaScript (Babel)
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ΅ΠΊΡ ΠΏΠ΅ΡΠ΅ΠΊΠΎΡΠ°
ΠΡΡΠ΅ΠΊΡ ΠΏΠ΅ΡΠ΅ΠΊΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² HTML, CSS ΠΈ JS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- magnificode
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ
- HTML / CSS (SCSS) / JavaScript (Babel)
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ΅ΠΊΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΠΎΠ½Π° ΠΈ ΡΠ΅ΠΊΡΡΠ°
Π‘ΡΠΏΠ΅Ρ Π±ΡΡΡΡΠ°Ρ ΠΈΠ΄Π΅Ρ Π΄Π»Ρ ΡΡΡΠ΅ΠΊΡΠ° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Firefox, Opera, Safari
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΡΠ°Π΄ΠΈΠ΅Π½Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
Π€ΠΎΠ½ΠΎΠ²ΡΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π°Π΄Π°ΠΏΡΠΈΡΡΠ΅ΡΡΡ ΠΊ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΠ²Π΅Π½ΡΠΈΠ½ ΠΠ΅ΡΠΎΠ½
Π ΠΊΠΎΠ΄Π΅
ΠΡΠΎΠΊΡΡΡΠΊΠ° ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ
ΠΡΠΎΠΊΡΡΡΠΊΠ° ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ.ΠΠΈ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΡΠΊΠΈ JavaScript!
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ
- HTML (ΠΌΠΎΠΏΡ) / CSS (SCSS) / JavaScript (Babel)
Π ΠΊΠΎΠ΄Π΅
ΠΠ°Π±Π»ΡΠ΄Π°ΡΠ΅Π»Ρ Π·Π° ΠΏΠ΅ΡΠ΅ΠΊΡΠ΅ΡΡΠΊΠΎΠΌ
API, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² DOM ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ»ΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΡΡΠΎΠ²Π½Ρ.ΠΠΎΠ·ΠΈΡΠΈΡ Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎ ΠΈ ΠΏΠΎΠ»Π΅Π·Π½Π° Π΄Π»Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ DOM.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ»ΠΎΠ²ΠΈΠ½Π° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
ΠΠΎΠ»ΠΎΠ²ΠΈΠ½Π° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° CSS ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²Π΅Ρ ΠΏΡΠΈ Π²Ρ
ΠΎΠ΄Π΅ Π² ΡΠ°Π·Π½ΡΠ΅ ΡΠ΅ΠΊΡΠΈΠΈ.ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π΄ΡΠ±Π»ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ°Π·Π΄Π΅Π»Π°. Π’Π΅ΠΏΠ΅ΡΡ Ρ ΡΠ΅ΠΆΠΈΠΌΠΎΠΌ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ
ΠΌΠ°Π³ΠΈΡ Π΄Π»Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ°.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
.