CSS3 | ΠΡΠΎΠΊΡΡΡΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
ΠΡΠΎΠΊΡΡΡΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
ΠΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅: 21.04.2016
ΠΠ΅ΡΠ΅Π΄ΠΊΠΎ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΎΠ»ΠΊΠ½ΡΡΡΡΡ Ρ ΡΠΈΡΡΠ°ΡΠΈΠ΅ΠΉ, ΠΊΠΎΠ³Π΄Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π±Π»ΠΎΠΊΠ° Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΠΌΠ΅ΡΡΠ°, ΡΠ΅ΠΌ ΡΠ°ΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΈ Π²ΡΡΠΎΡΠΎΠΉ Π±Π»ΠΎΠΊΠ°. Π ΡΡΠΎΠΉ ΡΠΈΡΡΠ°ΡΠΈΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π±ΡΠ°ΡΠ·Π΅Ρ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΎ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° Π³ΡΠ°Π½ΠΈΡΡ Π±Π»ΠΎΠΊΠ°.
ΠΠ΄Π½Π°ΠΊΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° Π² ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠΉ ΡΠΈΡΡΠ°ΡΠΈΠΈ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
auto
: Π΅ΡΠ»ΠΈ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° Π³ΡΠ°Π½ΠΈΡΡ Π±Π»ΠΎΠΊΠ°, ΡΠΎ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠ°. Π ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΡΠ»ΡΡΠ°ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡhidden
: ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π²ΠΈΠ΄ΠΈΠΌΠ°Ρ ΡΠ°ΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°. ΠΠΎΠ½ΡΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° Π³ΡΠ°Π½ΠΈΡΡ Π±Π»ΠΎΠΊΠ°, Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ, Π° ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π½Π΅ ΡΠΎΠ·Π΄Π°ΡΡΡΡscroll
: Π² Π±Π»ΠΎΠΊΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π²Π΅ΡΡ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² Π³ΡΠ°Π½ΠΈΡΠ°Ρ Π±Π»ΠΎΠΊΠ°, ΠΈ ΡΠ°ΠΊΠΈΡ ΠΏΠΎΠ»ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡvisible
: Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΎΠ½ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° Π³ΡΠ°Π½ΠΈΡΡ Π±Π»ΠΎΠΊΠ°
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π΄Π²ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ΠΡΠΎΠΊΡΡΡΠΊΠ° Π² CSS3</title> <style> .article1{ width: 300px; height: 150px; margin:15px; border: 1px solid #ccc; overflow: auto; } .article2{ width: 300px; height: 150px; margin:15px; border: 1px solid #ccc; overflow: hidden; } </style> </head> <body> <div> <p>Π‘ΡΠ°ΡΡΠΉ Π΄ΡΠ±, Π²Π΅ΡΡ ΠΏΡΠ΅ΠΎΠ±ΡΠ°ΠΆΠ΅Π½Π½ΡΠΉ, ΡΠ°ΡΠΊΠΈΠ½ΡΠ²ΡΠΈΡΡ ΡΠ°ΡΡΠΎΠΌ ΡΠΎΡΠ½ΠΎΠΉ, ΡΠ΅ΠΌΠ½ΠΎΠΉ Π·Π΅Π»Π΅Π½ΠΈ, ΠΌΠ»Π΅Π», ΡΡΡΡ ΠΊΠΎΠ»ΡΡ Π°ΡΡΡ Π² Π»ΡΡΠ°Ρ Π²Π΅ΡΠ΅ΡΠ½Π΅Π³ΠΎ ΡΠΎΠ»Π½ΡΠ°. ΠΠΈ ΠΊΠΎΡΡΠ²ΡΡ ΠΏΠ°Π»ΡΡΠ΅Π², Π½ΠΈ Π±ΠΎΠ»ΡΡΠ΅ΠΊ, Π½ΠΈ ΡΡΠ°ΡΠΎΠ³ΠΎ Π½Π΅Π΄ΠΎΠ²Π΅ΡΠΈΡ ΠΈ Π³ΠΎΡΡ β Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ Π±ΡΠ»ΠΎ Π²ΠΈΠ΄Π½ΠΎ.ΠΠ°, ΡΡΠΎ ΡΠΎΡ ΡΠ°ΠΌΡΠΉ Π΄ΡΠ±Β», β ΠΏΠΎΠ΄ΡΠΌΠ°Π» ΠΊΠ½ΡΠ·Ρ ΠΠ½Π΄ΡΠ΅ΠΉ, ΠΈ Π½Π° Π½Π΅Π³ΠΎ Π²Π΄ΡΡΠ³ Π½Π°ΡΠ»ΠΎ Π±Π΅ΡΠΏΡΠΈΡΠΈΠ½Π½ΠΎΠ΅ Π²Π΅ΡΠ΅Π½Π½Π΅Π΅ ΡΡΠ²ΡΡΠ²ΠΎ ΡΠ°Π΄ΠΎΡΡΠΈ ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ.</p> </div> <div> <p>Π‘ΡΠ°ΡΡΠΉ Π΄ΡΠ±, Π²Π΅ΡΡ ΠΏΡΠ΅ΠΎΠ±ΡΠ°ΠΆΠ΅Π½Π½ΡΠΉ, ΡΠ°ΡΠΊΠΈΠ½ΡΠ²ΡΠΈΡΡ ΡΠ°ΡΡΠΎΠΌ ΡΠΎΡΠ½ΠΎΠΉ, ΡΠ΅ΠΌΠ½ΠΎΠΉ Π·Π΅Π»Π΅Π½ΠΈ, ΠΌΠ»Π΅Π», ΡΡΡΡ ΠΊΠΎΠ»ΡΡ Π°ΡΡΡ Π² Π»ΡΡΠ°Ρ Π²Π΅ΡΠ΅ΡΠ½Π΅Π³ΠΎ ΡΠΎΠ»Π½ΡΠ°. ΠΠΈ ΠΊΠΎΡΡΠ²ΡΡ ΠΏΠ°Π»ΡΡΠ΅Π², Π½ΠΈ Π±ΠΎΠ»ΡΡΠ΅ΠΊ, Π½ΠΈ ΡΡΠ°ΡΠΎΠ³ΠΎ Π½Π΅Π΄ΠΎΠ²Π΅ΡΠΈΡ ΠΈ Π³ΠΎΡΡ β Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ Π±ΡΠ»ΠΎ Π²ΠΈΠ΄Π½ΠΎ. ΠΠ°, ΡΡΠΎ ΡΠΎΡ ΡΠ°ΠΌΡΠΉ Π΄ΡΠ±Β», β ΠΏΠΎΠ΄ΡΠΌΠ°Π» ΠΊΠ½ΡΠ·Ρ ΠΠ½Π΄ΡΠ΅ΠΉ, ΠΈ Π½Π° Π½Π΅Π³ΠΎ Π²Π΄ΡΡΠ³ Π½Π°ΡΠ»ΠΎ Π±Π΅ΡΠΏΡΠΈΡΠΈΠ½Π½ΠΎΠ΅ Π²Π΅ΡΠ΅Π½Π½Π΅Π΅ ΡΡΠ²ΡΡΠ²ΠΎ ΡΠ°Π΄ΠΎΡΡΠΈ ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ.</p> </div> </body> </html>
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow
ΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ ΠΏΠΎΠ»ΠΎΡΠ°ΠΌΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊΠ°ΠΊ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ, ΡΠ°ΠΊ ΠΈ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ
ΡΠ²ΠΎΠΉΡΡΠ²
overflow-x ΠΈ overflow-y ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΈ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ. ΠΠ°Π½Π½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°
ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΡΠ΅ ΠΆΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΡΠΎ ΠΈ overflow
:
overflow-x: auto; overflow-y: hidden;
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
Π£Π·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.
ΠΠ°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
ΠΠ°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π² Firefox ΠΈΠ»ΠΈ IE/Edge.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ ΠΏΠΎΠ»ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
ΠΡΠ°ΡΠ·Π΅ΡΡ WebKit, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Chrome, Safari ΠΈ Opera, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π½Π΅ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ::-webkit-scrollbar
ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ ΡΠΎΠ½ΠΊΠ°Ρ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ (10px Wide), ΠΊΠΎΡΠΎΡΠ°Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΠ΅ΡΡΠΉ ΡΠ²Π΅Ρ Π΄ΠΎΡΠΎΠΆΠΊΠΈ/ΠΏΠΎΠ»ΠΎΡΡ ΠΈ ΡΠ΅ΠΌΠ½ΠΎ-ΡΠ΅ΡΡΠΉ (#888) Π΄Π΅ΡΠΊΡΠΈΠΏΡΠΎΡ:
ΠΡΠΈΠΌΠ΅Ρ
/* width */::-webkit-scrollbar {
Β Β Β width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
}
/* Handle */
::-webkit-scrollbar-thumb {
Β Β Β background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
Β Β Β
background: #555;
}
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Ρ ΡΠ΅Π½ΡΡ ΠΏΠΎΠ»Ρ:
ΠΡΠΈΠΌΠ΅Ρ
/* width */::-webkit-scrollbar {
Β Β Β width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
Β Β Β box-shadow: inset 0 0 5px
grey;
Β Β Β border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
Β Β Β
background: red;
Β Β Β border-radius: 10px;
}
Π‘Π΅Π»Π΅ΠΊΡΠΎΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
ΠΠ»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² WebKit ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°:
::-webkit-scrollbar
ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ::-webkit-scrollbar-button
ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° ΠΏΠΎΠ»ΠΎΡΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ (ΡΡΡΠ΅Π»ΠΊΠΈ, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠ΅ Π²Π²Π΅ΡΡ ΠΈ Π²Π½ΠΈΠ·).::-webkit-scrollbar-thumb
ΠΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΌΠ°ΡΠΊΠ΅ΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.::-webkit-scrollbar-track
Π΄ΠΎΡΠΎΠΆΠΊΠ° (ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ) ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.::-webkit-scrollbar-track-piece
Π΄ΠΎΡΠΎΠΆΠΊΠ° (ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ) Π½Π΅ ΠΏΠΎΠΊΡΡΠ²Π°Π΅ΡΡΡ ΡΡΡΠΊΠΎΠΉ.::-webkit-scrollbar-corner
Π½ΠΈΠΆΠ½ΠΈΠΉ ΡΠ³ΠΎΠ» ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π³Π΄Π΅ Π²ΡΡΡΠ΅ΡΠ°ΡΡΡΡ ΠΊΠ°ΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠ΅, ΡΠ°ΠΊ ΠΈ veritcal ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.::-webkit-resizer
ΠΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΌΠ°ΡΠΊΠ΅ΡΠ° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π² Π½ΠΈΠΆΠ½Π΅ΠΌ ΡΠ³Π»Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠ°ΠΊ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ (ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³) Π² Webkit-Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
ΠΠ°ΡΠΈΠ½Π°Ρ Ρ Internet Explorer 5.5 Π²Π΅ΡΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ»Π° Π²ΡΠΏΡΡΠ΅Π½Π° Π² ΠΈΡΠ»Π΅ 2000 Π³ΠΎΠ΄Π°, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΠ²Π΅ΡΠ° ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΏΠΎΠ»ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π²Π°ΡΠ΅Π³ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. Π‘ΠΎΠ²ΡΠ΅ΠΌ Π½Π΅Π΄Π°Π²Π½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Webkit, Π΄ΠΎΠ³Π½Π°Π»ΠΈ IE ΠΈ ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠ΄Π΅Π»Π°ΡΡ Π΅ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΡ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π°. Π’Π΅ΠΏΠ΅ΡΡ ΠΈΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π½Π΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°ΡΡΡΡ ΠΏΡΠΎΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ ΡΠ²Π΅ΡΠ°.
Π¦Π²Π΅Ρ, Π¨ΠΈΡΠΈΠ½Π°, ΠΡΠ°Π½ΠΈΡΡ
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π°. Π’Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π² Π»ΡΠ±ΠΎΠΌ ΠΏΡΠΎΡΡΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ HTML, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠΎΠ½, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ. ΠΡΠ½ΠΊΡΠΈΡΠ½ΡΠ΅, ΠΎΠΊΡΡΠ³Π»ΡΠ΅ Π±Π΅Π³ΡΠ½ΠΊΠΈ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Ρ ΡΠΎΠ½ΠΎΠΌ ΠΈΠ»ΠΈ Π±Π΅Π· β Π²ΡΠ΅ ΡΡΠΎ ΡΠ΅ΠΏΠ΅ΡΡ Π»Π΅Π³ΠΊΠΎ Π΄ΠΎΡΡΠΈΠΆΠΈΠΌΠΎ.
ΠΡΠ΅ ΡΡΠΈ ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² Π²Π°ΡΠ΅ΠΌ ΡΠ°ΡΠΏΠΎΡΡΠΆΠ΅Π½ΠΈΠΈ:
::-webkit-scrollbar { } ::-webkit-scrollbar-button { } ::-webkit-scrollbar-track { } ::-webkit-scrollbar-thumb { } ::-webkit-scrollbar-corner { }
Π’Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ ΠΎΠ±ΡΡΠ½ΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ:
::-webkit-scrollbar { width: 20px; background: yellow; }
::-webkit-scrollbar-thumb { border: 2px dotted green; border-radius: 10px; }
Π Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, ΠΌΡ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΠΆΠ΅Π»ΡΠΎΠΉ Π²ΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΈ Π·Π°Π΄Π°Π΅ΠΌ ΡΠΈΡΠΈΠ½Ρ Π² 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΠΎΠ»Π·ΡΠ½ΠΎΠΊ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΠΏΡΠ½ΠΊΡΠΈΡΠ½ΡΠ΅ Π»ΠΈΠ½ΠΈΠΈ Π·Π΅Π»Π΅Π½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° ΠΏΠΎ Π²Π½Π΅ΡΠ½Π΅ΠΉ ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΠ΅.
::-webkit-scrollbar-thumb:hover { background: red; }
::-webkit-scrollbar-thumb:active { background: blue; }
ΠΠ΄Π΅ΡΡ Π½Π°ΠΌ Π½Π΅ Ρ Π²Π°ΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎΠΉ Π²Π΅ΡΠΈ, ΠΌΡ Π½Π΅ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS transition Π΄Π»Ρ Π³Π»Π°Π΄ΠΊΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ².
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎ-ΠΊΠ»Π°ΡΡΡ
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎ ΠΊΠ»Π°ΡΡΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Ρ Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡΠ½ΠΎΠΉ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠ»Π°ΡΡ β:inactive-windowβ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ Π΄Π΅Π»Π°ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ Π½Π΅Π°ΠΊΡΠΈΠ²Π½ΡΡ ΠΎΠΊΠΎΠ½, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ Π΄Π²Π° ΠΊΠ»Π°ΡΡΠ° β:horizontalβ ΠΈ β:verticalβ ΠΏΠΎΠ·Π°Π±ΠΎΡΡΡΡΡ ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π΄Π»Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΈΠ»ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ»ΠΎΡ:
::-webkit-scrollbar-thumb:horizontal { height: 12px; }
ΠΡΡΠΎΠΊΠΈΡ ΠΊΠΎΠ½Π²Π΅ΡΡΠΈΠΉ!
ΠΠ²ΡΠΎΡ ΡΡΠ°ΡΡΠΈ:Β Denis Potschien
10-03-2016
ΠΡΠΎΠΊΡΡΡΠΊΠ° ΠΈΠ»ΠΈ ΡΠΊΡΠΎΠ»Π»Π΅Ρ
14 666 Π‘ΠΊΡΠΈΠΏΡΡ / ScrollΠ‘ΠΊΡΠΎΠ»Π»Π±Π°Ρ β perfect-scrollbar
ΠΠ»Π°Π³ΠΈΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠΉ ΠΊΠ°ΡΡΠΎΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ ΡΠΊΡΠΎΠ»Π»Π±Π°Ρ.
6 873 Π‘ΠΊΡΠΈΠΏΡΡ / ScrollScrollify — ΡΡΠΊΠΎΡΠΈΡΠ΅Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊΠΎΠ»ΡΡΠΈΠΊΠ° ΠΌΡΡΠΈ
Scrollify — ΡΡΠΊΠΎΡΠΈΡΠ΅Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊΠΎΠ»ΡΡΠΈΠΊΠ° ΠΌΡΡΠΈ. jQuery ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π±ΡΡΡΡΠΎ ΠΈ ΠΏΠ»Π°Π²Π½ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡΡΡ ΠΊ Π½ΡΠΆΠ½ΠΎΠΌΡ ΡΠ°Π·Π΄Π΅Π»Ρ ΠΈΠ»ΠΈ ΡΠ΅ΠΊΡΠΈΠΈ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠΉ ΠΈ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π΄Π»Ρ touch ΡΡΡΡΠΎΠΉΡΡΠ².
Nicescroll — Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π° ΠΏΠΎΠ»ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
ΠΠ»Π°Π³ΠΈΠ½ nicescroll ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠΈΠ΄Π°ΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΌ ΠΏΠΎΠ»ΠΎΡΠ°ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΡΠΈΠ»Ρ Π²Π½Π΅ΡΠ½Π΅ ΠΏΠΎΡ ΠΎΠΆΠΈΠΉ Π½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ Π² ios (ΠΊΠ°ΠΊ Ρ apple). ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ, ΡΠ°ΠΊ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² DIV-Π°Ρ , Iframe-Π°Ρ , textarea ΠΈ body.
3 399 Π‘ΠΊΡΠΈΠΏΡΡ / ScrollΠΠ²ΡΠΎΠΏΡΠΎΠΊΡΡΡΠΊΠ° Π²Π²Π΅ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ
Π‘ΡΡΠ΅Π»ΠΎΡΠΊΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄ΠΎ Π²Π΅ΡΡ Π° ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° jQuery.
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° Π²Π²Π΅ΡΡ
ΠΡΠΎΡΡΠ°Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ Π½Π° jQuery Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π²Π²Π΅ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎΠ΄ ΠΏΡΠΎΠ²Π΅ΡΡΠ΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΊΡΠΎΠ»Π»Π±Π°ΡΠ°, Π΅ΡΠ»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²ΡΡΠ΅ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ, ΡΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΠΊΡΡΠ²Π°Π΅ΡΡΡ, ΠΈΠ½Π°ΡΠ΅ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ°, ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΠΊΠΎΡΠΎΡΡΡ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ Π² ΡΠ°ΠΌΡΠΉ Π²Π΅ΡΡ .
5 164 Π‘ΠΊΡΠΈΠΏΡΡ / ScrollΠΡΡΡΡΠ°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° Π²Π²Π΅ΡΡ ΠΈ Π²Π½ΠΈΠ·
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π΄Π²ΡΡ ΠΊΠ½ΠΎΠΏΠΎΡΠ΅ΠΊ Π½Π° Π²Π°Ρ ΡΠ°ΠΉΡ Π΄Π»Ρ Π±ΡΡΡΡΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² Π½Π°ΡΠ°Π»ΠΎ ΠΈΠ»ΠΈ Π² ΠΊΠΎΠ½Π΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ½ΠΎΠΏΠΊΠΈ Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Ρ Π² Π»Π΅Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡΠ³Π»Ρ. ΠΠΎΠ³Π΄Π° Π²Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΌΠΈ — ΡΠΎ Π΅ΡΡΡ ΠΊΠ°ΠΊ Π±Ρ Π½Π΅ ΠΎΠ±ΡΠ°ΡΠ°ΡΡ Π½Π° ΡΠ΅Π±Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅. ΠΠΎΠ³Π΄Π° ΡΡΡΠ°Π½ΠΈΡΠΊΠ° Π½Π΅ ΠΏΠΎΠ΄Π²ΠΈΠΆΠ½Π°, ΡΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΎΡΠΎΡΠΎ Π²ΠΈΠ΄Π½Ρ.
TinyScroller — ΠΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΠΈΠΉΡΡ DIV
jΠ°vascript ΡΠ΅Π°Π»ΠΈΠ·ΡΡΡΠΈΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΡ div ΠΈ Π²Π΅ΡΠΎΠΌ Π² 1,92 Kb. ΠΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ Π² Π»ΡΠ±ΠΎΠΌ HTML Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅. ΠΠΈΠ·Π°ΠΉΠ½ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΡΡΡ Π² CSS.
ΠΠ»Π°Π³ΠΈΠ½Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΡΠΈ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π΅ (ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅) ΡΡΡΠ°Π½ΠΈΡΡ
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡ Π½Π°ΡΠ½Π΅ΠΌ Ρ ΡΠ°ΠΌΡΡ
ΠΏΡΠΎΡΡΡΡ
ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Wow.js ΠΈ scrollReveal.js, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΡΡΠ΅Π±ΡΡΡ Π·Π½Π°Π½ΠΈΡ javascript, ΠΈ Π·Π°ΠΊΠΎΠ½ΡΠΈΠΌ ΠΏΠ»Π°Π³ΠΈΠ½Π°ΠΌΠΈ SuperScrollorama ΠΈ ScrollMagic, Π² ΠΊΠΎΡΠΎΡΡΡ
Π±Π΅Π· Π·Π½Π°Π½ΠΈΡ javascript ΡΠΆΠ΅ Π½Π΅ ΠΎΠ±ΠΎΠΉΡΠΈΡΡ.
ΠΠ»Π°Π³ΠΈΠ½Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ:
- Wow.js
- scrollReveal.js
- Skrollr.js
- ScrollMagic
ΠΡΠΈΠΌΠ΅Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ WOW.js:
See the Pen wow.js+animate.css | first steps by Alexey (@CreativeSeo33) on CodePen.
Wow.js Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π»ΡΠ±ΡΡ css Π°Π½ΠΈΠΌΠ°ΡΠΈΡ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, animate.css) ΠΊ HTML ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡΠΌ, ΠΏΠΎΠΊΠ° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π΅ ΠΏΡΠΎΠΊΡΡΡΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ Π΄ΠΎ Π½Π΅Π³ΠΎ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ, Π²Π°ΠΌ Π½Π΅ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΡΡΡΡ Π·Π½Π°Π½ΠΈΡ javascript.
ΠΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ΄Π°:
<div>Content to Reveal Here</div>
<div>Content to Reveal Here</div> |
ΠΠ»Π΅ΠΌΠ΅Π½Ρ div ΠΏΠΎΡΠ²ΠΈΡΡΡ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ bounceInUp, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΡ Π΄ΠΎ Π½Π΅Π³ΠΎ.
Π’Π°ΠΊΠΆΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Π΄Π°ΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ duration , delay , offset ΠΈ iteration.
ΠΡΠΈΠΌΠ΅Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ scrollReveal.js:
See the Pen Scroll Reveal by Alexey (@CreativeSeo33) on CodePen.
scrollReveal.js Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ².
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π²ΡΠ±ΡΠ°ΡΡ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΡΠ²ΠΈΡΡΡ, Π½ΠΎ ΡΠ°ΠΊΠΆΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡ ΡΡΡΠ΅ΠΊΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»ΡΡΠ΅Π²ΡΡ
ΡΠ»ΠΎΠ² from, and, then, with.
wait ΠΈΠ»ΠΈ after ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ Π·Π°Π΄Π΅ΡΠΆΠΊΡ ΠΌΠ΅ΠΆΠ΄Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡΠΌΠΈ.
ΠΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ΄Π°:
<!— ΠΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ Π΄Π΅ΡΠΎΠ»ΡΠ½ΡΠΌΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌΠΈ —> <div data-scroll-reveal> Hello world! </div> <!— ΠΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ Π·Π°Π΄Π°Π½Π½ΡΠΌΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌΠΈ —> <div data-scroll-reveal=»enter left and move 50px over 1.33s»> Foo </div>
<!— ΠΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ Π΄Π΅ΡΠΎΠ»ΡΠ½ΡΠΌΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌΠΈ —> <div data-scroll-reveal> Hello world! </div> <!— ΠΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ Π·Π°Π΄Π°Π½Π½ΡΠΌΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌΠΈ —> <div data-scroll-reveal=»enter left and move 50px over 1.33s»> Foo </div> |
ΠΠ΅ΡΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΡΠ²ΠΈΡΡΡ ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠΏΠ°Π΄Π΅Ρ Π² ΠΎΠ±Π»Π°ΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΠΈ.
Π£ Π²ΡΠΎΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π΄Π°Π½Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Ρ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΡΠ²ΠΈΡΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠΏΠ°Π΄Π΅Ρ Π² ΠΎΠ±Π»Π°ΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΠΈ.
ΠΡΠΈΠΌΠ΅Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Skrollr.js:
See the Pen Merry Christmallax β Skrollr.js animation by Alexey (@CreativeSeo33) on CodePen.
Skrollr ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΌΠΎΠΈΡ
Π»ΡΠ±ΠΈΠΌΡΡ
ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ².
Skrollr ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ·ΡΠ²Π°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠΏΠ°Π΄Π°Π΅Ρ Π² ΠΎΠ±Π»Π°ΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΠΈ, Π½ΠΎ ΠΈ ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠΊΠΈΠ΄Π°Π΅Ρ Π΅Π΅. Π’Π°ΠΊΠΆΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ Π΄Π»ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Π΄Π°ΡΡ ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π΄ΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΌΠΎΡΠ°ΡΡ, ΡΡΠΎΠ±Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π²ΡΠΏΠΎΠ»Π½ΠΈΠ»Π°ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ.
ΠΡΠΈΠΌΠ΅Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ SuperScrollorama:
See the Pen Text animation path[Cree Indian Prophecy] by Alexey (@CreativeSeo33) on CodePen.
SuperScrollorama ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ°ΠΌΡΡ
ΡΠ»ΠΎΠΆΠ½ΡΡ
ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², ΡΡΠ΅Π±ΡΡΡΠΈΠΉ Π·Π½Π°Π½ΠΈΠΉ javascript. ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Ρ
ΠΎΡΠΎΡΠΈΠ΅ Π·Π½Π°Π½ΠΈΡ javascript, ΡΠΎ ΡΡΠ° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄Π»Ρ Π²Π°Ρ.
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ:
- Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ;
- ΠΏΠ΅ΡΠ΅ΠΌΠΎΡΠΊΠ° Π½Π°Π·Π°Π΄, ΠΏΠ΅ΡΠ΅ΠΌΠΎΡΠΊΠ° Π²ΠΏΠ΅ΡΠ΅Π΄, ΠΏΠΎΠ²ΡΠΎΡ;
- callbacks;
- ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.
ΠΡΠΈΠΌΠ΅Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ScrollMagic:
See the Pen Simple ScrollMagic Tutorial by Alexey (@CreativeSeo33) on CodePen.
ScrollMagic ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ°ΠΌΡΡ
ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΡ
ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π° ΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΈΡΠ°Π½Π½ΡΠΌ ΠΏΡΠ΅Π΄ΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΈΠΊΠΎΠΌ SuperScrollorama.
ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½ Greensock ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ.
ΠΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°:
- ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ;
- Π³ΠΈΠ±ΠΊΠΎΡΡΡ;
- Π±ΠΎΠ»ΡΡΠ°Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ;
- Ρ ΠΎΡΠΎΡΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°;
ΠΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΏΡΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ScrollMagic:
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΠ»Π°Π²Π½ΡΠΉ ΡΠΊΡΠΎΠ»Π» Π½Π° iOS Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
Π― Π½Π΅ ΡΠΌΠΎΠ³Ρ Π²Π°ΠΌ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π΄Π΅ΠΌΠΎ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΊΠ°ΠΆΠ΅Ρ ΡΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, Π½ΠΎ ΠΏΠΎΡΡΠ°ΡΠ°ΡΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΠΎΠΏΠΈΡΠ°ΡΡ Π΅Ρ, Π° ΡΠ°ΠΊ ΠΆΠ΅ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅. Β
Π‘ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ
ΠΠΎ Π²ΡΠ΅ΠΌΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΡΠ°ΠΉΡΠ° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΠΎΠ»ΠΊΠ½ΡΡΡΡΡ Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΎΠΊΠΎΡΠΊΠ° Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ ΠΈΠ»ΠΈ Π΄Π»Ρ ΠΏΠ»Π°Π½ΡΠ΅ΡΠ° Π½Π° iOS.
ΠΠ° ΠΌΠΎΠ΅ΠΌ Π»ΠΈΡΠ½ΠΎΠΌ ΠΎΠΏΡΡΠ΅: Ρ Π²Π΅ΡΡΡΠ°Π»Β ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π»Π΅Π½Π΄ΠΈΠ½Π³Π°.
ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Ρ Π½Π΅Π³ΠΎ Π΄Π²Π΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠ°ΡΡΠΈ: (1) overlay β ΡΡΠΎ ΡΠ»ΠΎΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°Π΅Ρ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ (ΠΎΠ±ΡΡΠ½ΠΎ ΠΎΠ½ ΠΏΠΎΠ»ΡΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΉ) ΠΈ (2) ΡΠ°ΠΌΠΎ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΈΠ΄Π΅Ρ ΠΏΠΎΠ²Π΅ΡΡ overlay.
Π’Π°ΠΊ ΠΆΠ΅: ΠΡΠ»ΠΈ ΠΊΠΎΠΌΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, Ρ ΠΊΠ°ΠΊ-ΡΠΎΒ Π²ΡΠΊΠ»Π°Π΄ΡΠ²Π°Π» ΠΏΠΎΡΡ ΠΏΡΠΎ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ΅ ΠΎΠΊΠΎΡΠΊΠΎ Π²ΡΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠ΅ Π² ΡΡΠΈΠ»Π΅ Material Design.
ΠΠ»Ρ (1), Ρ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Ρ position: fixed
Β (ΡΡΠΎΠ±Ρ overlay Π±ΡΠ» Π²ΡΠ΅Π³Π΄Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΎ Π²ΠΎ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΡΠΊΡΠ°Π½Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΈ Π΄Π²ΠΈΠ³Π°Π»ΡΡ Π·Π° Π½ΠΈΠΌ ΠΏΡΠΈ ΡΠΊΡΠΎΠ»Π»Π΅), ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΡΠ°Π²Π½ΡΡ 100 ΠΏΡΡΠΎΠ΅Π½ΡΠ°ΠΌ ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΊΡΠΎΠ»Π»ΠΈΡΡ ΠΏΠΎ y-ΠΎΡΠΈ.
ΠΠ»Ρ (2), Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΒ position: absolute
Β ΠΈ ΡΠ²Π΅ΡΡ
Ρ (top: 50%) ΠΈ ΡΠ»Π΅Π²Π° (left: 50%) Π΄Π΅Π»Π°Ρ ΠΏΠΎ 50% ΠΈ ΠΏΠΎΡΠΎΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠΈΠ½ΡΡΠ½ΠΎΠ³ΠΎ margin-left: -{w}px
Β ΠΈ margin-top: -{h}px
Β Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Ρ ΠΎΠΊΠ½ΠΎ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ. Β {w}
Β β ΡΡΠΎ ΡΠΈΡΠΈΠ½Π° ΠΈ {h}
Β ΠΎΠΊΠ½Π° Π΄Π΅Π»Π΅Π½Π½Π°Ρ Π½Π° ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρ.
ΠΠ»Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π½ΠΈΠΆΠ΅:
Π Π΅ΡΠ΅Π½ΠΈΠ΅
Π Π΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΊΠ°ΠΊ ΠΎΠΊΠ°Π·Π°Π»ΠΎΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎΠ΅ β ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Β overflow
Β ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, Π½ΠΎ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΒ Π΄Π»Ρ webkit
Β Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ².
Π ΠΌΠΎΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠΊΡΠΎΠ»Π» Π΄Π΅Π»Π°Π»ΡΡ Π² overlay ΠΎΠΊΠ½Π΅, ΡΠ΅ΠΌ ΡΠ°ΠΌΡΠΌ ΠΌΠ½Π΅ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠΏΠΈΡΠ°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°:
overflow-y: scroll; -webkit-overflow-scrolling: touch;
CΒ overflow-y
Β Π²ΡΠ΅ ΠΏΠΎΠ½ΡΡΠ½ΠΎ. ΠΠ»Ρ Π½Π°Ρ Π²Π°ΠΆΠ½Π΅Π΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ -webkit-overflow-scrolling
. AppleΒ ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ Π΅Π³ΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
Specifies whether to use native-style scrolling in an overflow:scroll element.
ΠΠΎΡΠ»ΠΎΠ²Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄: Β«Ρ ΠΎΡΠΈΡΠ΅ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΡΠΊΡΠΎΠ»Π» ΡΡΡΡΠΎΠΉΡΡΠ²Π° (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ iPhone 7) ΠΈΠ»ΠΈ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ overflow: scrollΒ«.
ΠΡΠΈΠ½ΠΈΠΌΠ°ΡΡΡΡ Π΄Π²Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
auto
Β β ΡΠΊΡΠΎΠ»Π» Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΠ°Π»ΡΡΠ°, Π±Π΅Π· ΠΌΠΎΠΌΠ΅Π½ΡΡΠΌΠ°
touch
Β β ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ ΡΠΊΡΠΎΠ»Π» Π΄Π΅Π²Π°ΠΉΡΠ°
ΠΡΡΠΎΡΠ½ΠΈΠΊΠΈ ΠΈ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅Π΅ ΡΡΠ΅Π½ΠΈΠ΅
ΡΠ΅Π°Π»ΠΈΠ·ΡΠ΅ΠΌ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΡΠ΅ΠΊΡΠΈΠΈ Π½Π° Flexbox
ΠΒ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡΒ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ²ΡΠ΅Π΄Π½Π΅Π²Π½ΠΎΠΉ Π·Π°Π΄Π°ΡΠΈ: ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΡ ΡΠ΅ΠΊΡΠΈΡ ΡΠ°ΠΉΡΠ°? ΠΡΠ»ΠΈ Π²ΠΊΡΠ°ΡΡΠ΅, ΠΎΡΠ²Π΅ΡΒ β Flexbox.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°Π·Π±Π΅ΡΡΠΌΡΡ Ρ ΡΡΠΈΠΌ Π±ΠΎΠ»Π΅Π΅ Π΄Π΅ΡΠ°Π»ΡΠ½ΠΎ.
ΠΠ°ΡΠΊΠ°Ρ
ΠΠ·Π³Π»ΡΠ½ΠΈΡΠ΅ Π½Π°Β ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ. ΠΡΠΎ ΠΏΡΠΎΡΡΠΎΠΉ Π±Π»ΠΎΠΊ section
ΡΒ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠΌΠΈ div
:
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
Π‘ΡΠΈΠ»ΠΈ
ΠΠ»ΠΎΡ ΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π½ΠΈΠΊΡΠΎ Π½Π΅Β Π»ΡΠ±ΠΈΡ, ΠΏΠΎΡΡΠΎΠΌΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΡΡΡΠ°Π½ΠΈΡΠΊΡ Π±ΠΎΠ»Π΅Π΅ ΠΎΠΏΡΡΡΠ½ΠΎΠΉ:
html,
body {
width: 100%;
height: 100%;
}
body {
background-color: #8e44ad;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
Π‘ΠΏΠ΅ΡΠ²Π° ΠΌΡΒ ΡΠ²Π½ΠΎ Π·Π°Π΄Π°ΡΠΌ ΡΠΈΡΠΈΠ½Ρ ΠΈΒ Π²ΡΡΠΎΡΡ ΠΊΠΎΡΠ½Π΅Π²ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠ°Π²Π½ΠΎΠΉ 100%
. ΠΠ°ΡΠ΅ΠΌ ΠΌΡΒ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΡΠ²Π΅Ρ ΡΠΎΠ½Π°, ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΠΎΡΡΡΡΠΏ Ρ body
ΠΈΒ ΡΠ΅Π½ΡΡΠΈΡΡΠ΅ΠΌ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠΉ Π²Β Π½Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
ΠΠ»Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎΡΡΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌ ΡΡΠΈΠ»ΠΈ ΠΊΒ ΡΡΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡΒ <section>
:
.
card {
background-color: #fff;
min-width: 100%;
min-height: 200px;
}
Π‘Β ΠΏΠ΅ΡΠ²ΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ Π²ΡΡ ΠΏΠΎΠ½ΡΡΠ½ΠΎ, Π²ΡΠΎΡΠΎΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠ΅ΠΊΡΠΈΠΈ Π²ΡΡ Π²ΡΠ΅ΠΌΡ Π·Π°Π½ΠΈΠΌΠ°ΡΡ 100% ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π°Β ΡΡΠ΅ΡΡΠ΅ Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅Ρ, ΡΡΠΎ Π²ΡΡΠΎΡΠ° ΡΠ΅ΠΊΡΠΈΠΈ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄Π΅Ρ Π½Π΅Β ΠΌΠ΅Π½Π΅Π΅ 200px
. ΠΠΎΡ, ΡΡΠΎ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ Π½Π°Β Π΄Π°Π½Π½ΠΎΠΌ ΡΡΠ°ΠΏΠ΅:
ΠΠΎΠΌΠ΅ΡΡΠΈΠΌ Π²ΡΠ΅ Π±Π»ΠΎΠΊΠΈ card--content
Π²Β ΡΠ΅ΠΊΡΠΈΡ card
ΠΈΒ ΡΠ½ΠΎΠ²Π° Π·Π°ΠΉΠΌΡΠΌΡΡ ΡΡΠΈΠ»ΡΠΌΠΈ. Π‘ΠΏΠ΅ΡΠ²Π° ΡΠ΄Π΅Π»Π°Π΅ΠΌ card
flex-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ:
.card {display: flex}
ΠΠ°ΡΠ΅ΠΌ Π·Π°ΠΉΠΌΡΠΌΡΡ .card--content
:
.card--content {
background-color: #e74c3c;
min-width: 200px;
margin: 5px;
}
Π’ΡΠ΅ΡΡΡ ΡΡΡΠΎΠΊΠ° Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅Ρ, ΡΡΠΎ ΡΠΈΡΠΈΠ½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ°ΡΡΠΎΡΠΊΠΈ Π±ΡΠ΄Π΅Ρ Π½Π΅ ΠΌΠ΅Π½ΡΡΠ΅ 200px
, Π²ΡΡ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΠΎ ΠΈΒ ΠΏΠΎΠ½ΡΡΠ½ΠΎ. ΠΠΎΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
ΠΠ°ΠΊ Π²ΡΒ ΠΌΠΎΠ³Π»ΠΈ Π·Π°ΠΌΠ΅ΡΠΈΡΡ, ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π²ΡΡ ΡΡΡΠ°Π½ΠΈΡΠ°. Π’Π°ΠΊ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π²Β ΡΠ΅ΠΊΡΠΈΡ card
ΠΏΠΎΠΌΠ΅ΡΠ°ΡΡΡΡ Π½Π΅Β Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
ΠΡΠΏΡΠ°Π²ΠΈΠΌ ΡΡΠΎ ΡΠ°ΠΊ:
.card {
overflow-x: auto;
}
ΠΒ ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΠΊΡΠΈΡ:
ΠΠ΅ΠΏΠ»ΠΎΡ ΠΎ!
ΠΡΡΡΠ΅ΠΌ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
ΠΡΠ°ΡΠΎΡΡ ΡΠ°Π΄ΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΏΡΡΡΠ°ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΠ»Ρ webkit-Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² (Chrome ΠΈΒ Safari) Π΅ΡΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ±:
.card::-webkit-scrollbar {
display: none;
}
Π‘ΠΎΠ³Π»Π°ΡΠΈΡΠ΅ΡΡ, ΡΠ°ΠΊ ΡΡΡΠ°Π½ΠΈΡΠΊΠ° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π»ΡΡΡΠ΅.
Π‘ΠΏΠΎΡΠΎΠ±Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ
ΠΒ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΌΡΒ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ ΠΏΡΡΡΡΠ΅ Π±Π»ΠΎΠΊΠΈ, Π½ΠΎΒ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΎΡ ΠΏΡΠΈΡΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΒ ΠΌΠ½ΠΎΠ³ΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ . ΠΠΎΡ ΠΏΠ°ΡΠ° ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ²:
ΠΠ°ΡΠ° ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½Π°Ρ Π²Π΅ΡΡΠΈΡ Instagram:
ΠΡΠΎΡΡΠ°Ρ Π΄ΠΎΡΠΊΠ° Π΄Π»Ρ Π·Π°ΠΌΠ΅ΡΠΎΠΊ:
ΠΠ΅ΡΠ΅Π²ΠΎΠ΄ ΡΡΠ°ΡΡΠΈ Β«How to create horizontally scrollable sections withΒ FlexboxΒ»
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ CSS
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ ΡΡΡΠ΅ΠΊΡ ΠΏΠ»Π°Π²Π½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ:
html {
ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ: ΠΏΠ»Π°Π²Π½ΠΎ;
}
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ scroll-behavior
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ
ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΠΏΠ»Π°Π²Π½ΠΎ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π²ΠΌΠ΅ΡΡΠΎ ΠΏΡΡΠΌΠΎΠ³ΠΎ ΠΏΡΡΠΆΠΊΠ°,
ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ ΡΡΡΠ»ΠΊΡ Π² ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠΌ ΠΏΠΎΠ»Π΅.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: | Π°Π²ΡΠΎ |
---|---|
Π£Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΎ: | Π½Π΅Ρ |
ΠΠ½ΠΈΠΌΠΈΡΡΠ΅ΠΌΠΎΠ΅: | Π½Π΅Ρ.ΠΡΠΎΡΠΈΡΠ°ΡΡ ΠΎ animatable |
ΠΠ΅ΡΡΠΈΡ: | ΠΠΎΠ΄ΡΠ»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° CSSOM (ΡΠ°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΎΠ΅ΠΊΡ) |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ JavaScript: | ΠΎΠ±ΡΠ΅ΠΊΡ .style.scrollBehavior = «smooth» ΠΠΎΠΏΡΡΠ°ΠΉΡΡ |
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°
Π§ΠΈΡΠ»Π° Π² ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΏΠ΅ΡΠ²ΡΡ Π²Π΅ΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ.
ΠΠ±ΡΠ΅ΠΊΡ | |||||
---|---|---|---|---|---|
ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ | 61.0 | 79,0 | 36,0 | 14,0 | 48,0 |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ CSS
ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ: Π°Π²ΡΠΎ | Π³Π»Π°Π΄ΠΊΠΎΠ΅ | Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ | Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅;
Π‘ΡΠΎΠΈΠΌΠΎΡΡΡ Π½Π΅Π΄Π²ΠΈΠΆΠΈΠΌΠΎΡΡΠΈ
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
Π°Π²ΡΠΎ | ΠΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΡΡ Β«ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈΒ» ΠΏΡΡΠΌΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π² ΠΏΠΎΠ»Π΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ |
Π³Π»Π°Π΄ΠΊΠ°Ρ | ΠΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠ»Π°Π²Π½ΠΎ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ Β«ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈΒ» ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π² ΠΏΠΎΠ»Π΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. |
Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. Π§ΠΈΡΠ°ΡΡ ΠΏΡΠΎ Π½Π°ΡΠ°Π»ΡΠ½ΡΠ΅ |
Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΎΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π§ΠΈΡΠ°ΡΡ ΠΏΡΠΎ Π½Π°ΡΠ»Π΅Π΄ΡΡΠ²ΠΎ |
CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow-y
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΎΠΊΠ°Π·Π°ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow-y:
div.ex1 {ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-y: ΠΏΡΠΎΠΊΡΡΡΠΊΠ°;
}
Π΄Π΅Π».ex2 {
overflow-y: ΡΠΊΡΡΡΠΎ;
}
div. ex3 {
overflow-y:
Π°Π²ΡΠΎ;
}
div.ex4 {
overflow-y: visible;
}
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow-y
ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, Π½ΡΠΆΠ½ΠΎ Π»ΠΈ ΠΎΠ±ΡΠ΅Π·Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π»ΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΡ.
bar, ΠΈΠ»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ°, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ Π½Π°
Π²Π΅ΡΡ
Π½ΠΈΠΉ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΡΠ°Ρ.
Π‘ΠΎΠ²Π΅Ρ: ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow-x Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΎΠ±ΡΠ΅Π·ΠΊΠΈ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΈ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: | Π²ΠΈΠ΄ΠΈΠΌΡΠΉ |
---|---|
Π£Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΎ: | Π½Π΅Ρ |
ΠΠ½ΠΈΠΌΠΈΡΡΠ΅ΠΌΠΎΠ΅: | Π½Π΅Ρ. ΠΡΠΎΡΠΈΡΠ°ΡΡ ΠΎ animatable |
ΠΠ΅ΡΡΠΈΡ: | CSS3 |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ JavaScript: | ΠΎΠ±ΡΠ΅ΠΊΡ .style.overflowY = «scroll» ΠΠΎΠΏΡΡΠ°ΠΉΡΡ |
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°
Π§ΠΈΡΠ»Π° Π² ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΏΠ΅ΡΠ²ΡΡ Π²Π΅ΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ.
Π§ΠΈΡΠ»Π°, Π·Π° ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΡΠ»Π΅Π΄ΡΠ΅Ρ -ms-, ΡΠΊΠ°ΠΆΠΈΡΠ΅ ΠΏΠ΅ΡΠ²ΡΡ Π²Π΅ΡΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ°Π±ΠΎΡΠ°Π»Π° Ρ ΠΏΡΠΈΡΡΠ°Π²ΠΊΠ°.
ΠΠ±ΡΠ΅ΠΊΡ | |||||
---|---|---|---|---|---|
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ | 4,0 | 9,0 8,0 -ΠΌΡ- | 1,5 | 3,0 | 9,5 |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ CSS
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-y: Π²ΠΈΠ΄ΠΈΠΌΡΠΉ | ΡΠΊΡΡΡΡΠΉ | ΠΏΡΠΎΠΊΡΡΡΠΊΠ° | Π°Π²ΡΠΎ | Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ | Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅;
Π‘ΡΠΎΠΈΠΌΠΎΡΡΡ Π½Π΅Π΄Π²ΠΈΠΆΠΈΠΌΠΎΡΡΠΈ
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ | ΠΠ³ΡΠ°ΠΉ |
---|---|---|
Π²ΠΈΠ΄ΠΈΠΌΡΠΉ | ΠΠΎΠ½ΡΠ΅Π½Ρ Π½Π΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π²Π½Π΅ ΠΏΠΎΠ»Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°.ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ | ΠΠ³ΡΠ°ΠΉ Β» |
ΡΠΊΡΡΡΠΎ | ΠΠΎΠ½ΡΠ΅Π½Ρ ΠΎΠ±ΡΠ΅Π·Π°Π½ — ΠΈ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π½Π΅Ρ | ΠΠ³ΡΠ°ΠΉ Β» |
ΡΠ²ΠΈΡΠΎΠΊ | ΠΠΎΠ½ΡΠ΅Π½Ρ ΠΎΠ±ΡΠ΅Π·Π°Π½, ΠΈ ΠΏΡΠ΅Π΄ΡΡΠΌΠΎΡΡΠ΅Π½ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ | ΠΠ³ΡΠ°ΠΉ Β» |
Π°Π²ΡΠΎ | ΠΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠΌΠΎΡΡΠ΅Π½ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½Π½ΡΡ ΡΡΠΈΠΊΠΎΠ² | ΠΠ³ΡΠ°ΠΉ Β» |
Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.![]() | ΠΠ³ΡΠ°ΠΉ Β» |
Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΎΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π§ΠΈΡΠ°ΡΡ ΠΏΡΠΎ Π½Π°ΡΠ»Π΅Π΄ΡΡΠ²ΠΎ |
Π‘Π²ΡΠ·Π°Π½Π½ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ
Π£ΡΠ΅Π±Π½ΠΈΠΊCSS: ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ CSS
Π‘ΡΡΠ»ΠΊΠ° Π½Π° HTML DOM: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflowY
CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow-x
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΎΠΊΠ°Π·Π°ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow-x:
div.ex1 {overflow-x: scroll;
}
Π΄Π΅Π». Ex2 {
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x: ΡΠΊΡΡΡΠΎ;
}
div.ex3 {
overflow-x:
Π°Π²ΡΠΎ;
}
div.ex4 {
overflow-x: visible;
}
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow-x
ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, Π½ΡΠΆΠ½ΠΎ Π»ΠΈ ΠΎΠ±ΡΠ΅Π·Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π»ΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΡ.
bar, ΠΈΠ»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ°, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ Π½Π°
Π»Π΅Π²ΡΠΉ ΠΈ ΠΏΡΠ°Π²ΡΠΉ ΠΊΡΠ°Ρ.
Π‘ΠΎΠ²Π΅Ρ: ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow-y Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΎΡΡΠ΅ΡΠ΅Π½ΠΈΡ Π½Π° Π²Π΅ΡΡ Π½ΠΈΠΉ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΡΠ°Ρ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: | Π²ΠΈΠ΄ΠΈΠΌΡΠΉ |
---|---|
Π£Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΎ: | Π½Π΅Ρ |
ΠΠ½ΠΈΠΌΠΈΡΡΠ΅ΠΌΠΎΠ΅: | Π½Π΅Ρ. ΠΡΠΎΡΠΈΡΠ°ΡΡ ΠΎ animatable |
ΠΠ΅ΡΡΠΈΡ: | CSS3 |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ JavaScript: | ΠΎΠ±ΡΠ΅ΠΊΡ .style.overflowX = «ΠΏΡΠΎΠΊΡΡΡΠΊΠ°» ΠΠΎΠΏΡΡΠ°ΠΉΡΡ |
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°
Π§ΠΈΡΠ»Π° Π² ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΏΠ΅ΡΠ²ΡΡ Π²Π΅ΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ.
Π§ΠΈΡΠ»Π°, Π·Π° ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΡΠ»Π΅Π΄ΡΠ΅Ρ -ms-, ΡΠΊΠ°ΠΆΠΈΡΠ΅ ΠΏΠ΅ΡΠ²ΡΡ Π²Π΅ΡΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ°Π±ΠΎΡΠ°Π»Π° Ρ ΠΏΡΠΈΡΡΠ°Π²ΠΊΠ°.
ΠΠ±ΡΠ΅ΠΊΡ | |||||
---|---|---|---|---|---|
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x | 4.![]() | 9,0 8,0 -ΠΌΡ- | 3,5 | 3,0 | 9,5 |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ CSS
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x: Π²ΠΈΠ΄ΠΈΠΌΡΠΉ | ΡΠΊΡΡΡΡΠΉ | ΠΏΡΠΎΠΊΡΡΡΠΊΠ° | Π°Π²ΡΠΎ | Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ | Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅;
Π‘ΡΠΎΠΈΠΌΠΎΡΡΡ Π½Π΅Π΄Π²ΠΈΠΆΠΈΠΌΠΎΡΡΠΈ
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ | ΠΠ³ΡΠ°ΠΉ |
---|---|---|
Π²ΠΈΠ΄ΠΈΠΌΡΠΉ | ΠΠΎΠ½ΡΠ΅Π½Ρ Π½Π΅ ΠΎΠ±ΡΠ΅Π·Π°Π½, ΠΈ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΈ ΠΏΡΠ°Π²ΡΠ΅ ΠΊΡΠ°Ρ.ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ | ΠΠ³ΡΠ°ΠΉ Β» |
ΡΠΊΡΡΡΠΎ | ΠΠΎΠ½ΡΠ΅Π½Ρ ΠΎΠ±ΡΠ΅Π·Π°Π½ — ΠΈ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π½Π΅Ρ | ΠΠ³ΡΠ°ΠΉ Β» |
ΡΠ²ΠΈΡΠΎΠΊ | ΠΠΎΠ½ΡΠ΅Π½Ρ ΠΎΠ±ΡΠ΅Π·Π°Π½, ΠΈ ΠΏΡΠ΅Π΄ΡΡΠΌΠΎΡΡΠ΅Π½ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ | ΠΠ³ΡΠ°ΠΉ Β» |
Π°Π²ΡΠΎ | ΠΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠΌΠΎΡΡΠ΅Π½ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½Π½ΡΡ ΡΡΠΈΠΊΠΎΠ² | ΠΠ³ΡΠ°ΠΉ Β» |
Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.Π§ΠΈΡΠ°ΡΡ ΠΏΡΠΎ Π½Π°ΡΠ°Π»ΡΠ½ΡΠ΅ | ΠΠ³ΡΠ°ΠΉ Β» |
Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΎΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π§ΠΈΡΠ°ΡΡ ΠΏΡΠΎ Π½Π°ΡΠ»Π΅Π΄ΡΡΠ²ΠΎ |
Π‘Π²ΡΠ·Π°Π½Π½ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ
Π£ΡΠ΅Π±Π½ΠΈΠΊCSS: ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ CSS
Π‘ΡΡΠ»ΠΊΠ° Π½Π° HTML DOM: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflowX
ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ | CSS-ΡΠ»ΠΎΠ²ΠΊΠΈ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ scroll-behavior
Π² CSS ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ, ΠΏΠ΅ΡΠ΅ΡΠΊΠ°ΠΊΠΈΠ²Π°Π΅Ρ Π»ΠΈ ΠΌΠ΅ΡΡΠΎ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Π² Π½ΠΎΠ²ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ ΠΈΠ»ΠΈ ΠΏΠ»Π°Π²Π½ΠΎ Π°Π½ΠΈΠΌΠΈΡΡΠ΅Ρ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠ΅Π»ΠΊΠ°Π΅Ρ ΡΡΡΠ»ΠΊΡ, Π½Π°ΡΠ΅Π»Π΅Π½Π½ΡΡ Π½Π° Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ Π² ΠΏΠΎΠ»Π΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
html {
ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ: ΠΏΠ»Π°Π²Π½ΠΎΠ΅;
}
ΠΠΎΠ»Π΅Π΅ Π³Π»ΡΠ±ΠΎΠΊΠΎΠ΅ ΠΎΠ±ΡΡΡΠ½Π΅Π½ΠΈΠ΅
ΠΠΎΠ΄ΠΎΠΆΠ΄ΠΈΡΠ΅, ΠΏΠΎΠ΄ΠΎΠΆΠ΄ΠΈΡΠ΅, ΠΎ ΡΠ΅ΠΌ ΠΌΡ Π³ΠΎΠ²ΠΎΡΠΈΠΌ? ΠΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° Π΅Π³ΠΎ Π³ΡΠ°Π½ΠΈΡΡ.
Π‘ΠΌ. ΠΠΊΠ½ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΠ΅ΡΠ° ΠΎΡ CSS-Tricks (@ css-tricks) Π½Π° CodePen.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ Π² ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΉ Π²ΡΡΠ΅ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π²ΡΡΠΎΡΡ 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
? ΠΡΠ±ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΠΏΡΠ΅Π²ΡΡΠ°ΡΡΠ΅Π΅ ΡΡΡ Π²ΡΡΠΎΡΡ, Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΠΏΠΎΠ»Ρ, ΠΈ ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ overflow-y: scroll
, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.ΠΠΎΡ ΡΡΠΎ ΠΌΡ ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅ΠΌ ΠΏΠΎΠ΄ ΠΏΠΎΠ»Π΅ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΡΡΠΎ ΠΌΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Π² Π²Π΅ΡΡ Π½ΡΡ ΡΠ°ΡΡΡ ΠΎΠΊΠ½Π°, Π³Π΄Π΅ ΠΊΠ°ΠΆΠ΄Π°Ρ ΡΡΡΠ»ΠΊΠ° Π½Π°ΡΠ΅Π»Π΅Π½Π° Π½Π° ΡΡΠΈ ΡΠ°Π·Π΄Π΅Π»Π° ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ:
Π‘ΠΌ. ΠΠΎΠ»Π΅ Pen Scrolling Box w / Nav ΠΎΡ CSS-Tricks (@ css-tricks) Π½Π° CodePen.
ΠΠ°ΠΆΠ΄Π°Ρ ΡΡΡΠ»ΠΊΠ° Π²Π΅Π΄Π΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΊ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌ ΡΠ°Π·Π΄Π΅Π»Π°ΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π²Π½ΡΡΡΠΈ ΠΏΠΎΠ»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ΅Π·ΠΊΠΈΠΌ ΡΠΊΠ°ΡΠΊΠΎΠΌ.
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ ΡΠ΅Π·ΠΊΠΈΠΉ ΠΈ Π²Π½Π΅Π·Π°ΠΏΠ½ΡΠΉ. Π’Π°ΠΊΠΎΠΉ ΠΏΡΡΠΆΠΎΠΊ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°Π·Π΄ΡΠ°ΠΆΠ°ΡΡ.ΠΠΎΡ ΡΡΡ-ΡΠΎ ΠΈ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ scroll-behavior
, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠ»Π°Π²Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅. Π’Π°ΠΊΠΎΠ³ΠΎ ΡΠΎΠ΄Π° Π²Π΅ΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΠΏΡΠΈΡΡΠ΄Π»ΠΈΠ²ΠΎΠ³ΠΎ Javascript, Π½ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
Π΄Π°ΡΡ Π½Π°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π² CSS, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΡΠ»ΡΡΡΠΈΡΡΡ.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
.module {
ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ: [Π°Π²ΡΠΎ | Π³Π»Π°Π΄ΠΊΠΈΠΉ ];
}
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ scroll-behavior
ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π΄Π²Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎ ΡΡΡΠ΅ΡΡΠ²Ρ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΠΈ Π²ΡΠΊΠ»ΡΡΠ°ΡΡ ΡΡΠ½ΠΊΡΠΈΡ ΠΏΠ»Π°Π²Π½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
-
auto
(ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ): ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ°Π΅Ρ ΡΠ΅Π·ΠΊΠΈΠΉ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π² ΠΏΠΎΠ»Π΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. -
smooth
: ΠΠ΅ΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠ΅ΠΌΡ Π½Π°Π·Π²Π°Π½ΠΈΡ, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΏΠ»Π°Π²Π½ΡΠΉ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π² ΠΏΠΎΠ»Π΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
ΠΠ΅ΠΌΠΎ
Π‘Π»Π΅Π΄ΡΡΡΠ°Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² Chrome 61+, Firefox 36+ ΠΈ Opera 48+ Π½Π° ΠΌΠΎΠΌΠ΅Π½Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ.
Π‘ΠΌ. ΠΠΊΠ½ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΠ΅ΡΠ° Ρ `scroll-behavior` ΠΎΡ CSS-Tricks (@ css-tricks) Π½Π° CodePen.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°
ΠΠ°ΡΡΠΎΠ»ΡΠ½ΡΠΉ ΠΠ
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
61 | 36 | ΠΠ΅Ρ | 79 | ΠΠ΅Ρ |
ΠΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ /
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ
Π₯ΠΎΡΠΎΡΠΎ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΠ°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS Scroll Snap | ΠΠ΅Π±
Π ΠΎΠ±Π΅ΡΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ°Π²ΡΠΎΡΠΎΠΌ Web Fundamentals
ΠΠ½ΠΆΠ΅Π½Π΅Ρ-ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡ, ΡΠ°Π±ΠΎΡΠ°ΡΡΠΈΠΉ Π½Π°Π΄ Chromium
TL; DR
Π€ΡΠ½ΠΊΡΠΈΡCSS Scroll Snap ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ Ρ ΠΎΡΠΎΡΠΎ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ, ΠΎΠ±ΡΡΠ²ΠΈΠ² ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΉ.Π‘ΡΠ°ΡΡΠΈ Ρ ΡΠ°Π·Π±ΠΈΠ²ΠΊΠΎΠΉ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΠΊΠ°ΡΡΡΠ΅Π»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ — Π΄Π²Π° ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΠΏΡΠΈΠΌΠ΅ΡΡ ΡΡΠΎΠ³ΠΎ. CSS Scroll Snap ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΏΡΠΎΡΡΠΎΠΉ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΈ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΡΠΉ API Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°Ρ ΡΡΠΈ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠ΅ ΡΠ°Π±Π»ΠΎΠ½Ρ UX, ΠΈ Chrome ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ Π²ΡΡΠΎΠΊΡΡ ΡΠΎΡΠ½ΠΎΡΡΡ ΠΈ Π±ΡΡΡΡΠ°Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ Π² Π²Π΅ΡΡΠΈΠΈ 69.
Π€ΠΎΠ½
Π€ΡΡΠ»ΡΡ Π΄Π»Ρ ΡΠΈΠΊΡΠ°ΡΠΈΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
ΠΡΠΎΠΊΡΡΡΠΊΠ° — ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΉ ΠΈ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅. ΠΡΠΎ
ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΌ ΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ ΠΏΠ»Π°ΡΡΠΎΡΠΌΡ Π΄Π»Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΡ Π΄ΠΎΡΡΡΠΏΠ° ΠΊ Π±ΠΎΠ»ΡΡΠ΅ΠΌΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ, ΡΠ΅ΠΌ
ΡΡΠ°Π·Ρ Π²ΠΈΠ΄Π½ΠΎ Π½Π° ΡΠΊΡΠ°Π½Π΅, ΡΡΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π²Π°ΠΆΠ½ΠΎ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ°Ρ
Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΠΎΠΉ ΠΏΠ»ΠΎΡΠ°Π΄ΡΡ ΡΠΊΡΠ°Π½Π°.ΠΠΎΡΡΠΎΠΌΡ Π½Π΅ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΡΡΠΎ Π²Π΅Π±-Π°Π²ΡΠΎΡΡ
Π²ΡΠ΅ ΡΠ°ΡΠ΅ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°ΡΡ ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²ΡΠ²Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π² ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΠΏΠ»ΠΎΡΠΊΠΈΠ΅ ΡΠΏΠΈΡΠΊΠΈ, Π° Π½Π΅
Π³Π»ΡΠ±ΠΎΠΊΠΈΠ΅ ΠΈΠ΅ΡΠ°ΡΡ
ΠΈΠΈ.
ΠΠ»Π°Π²Π½ΡΠΉ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΠΊ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π° — Π½Π΅ΡΠΎΡΠ½ΠΎΡΡΡ. Π Π΅Π΄ΠΊΠΎ ΡΠ²ΠΈΡΠΎΠΊ Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°Π΅ΡΡΡ Π²ΡΡΠΎΠ²Π½Π΅Π½ ΠΏΠΎ Π°Π±Π·Π°ΡΡ ΠΈΠ»ΠΈ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΡΠΎ Π΅ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ Π·Π°ΠΌΠ΅ΡΠ½ΠΎ Π΄Π»Ρ ΡΠ°Π·Π±ΠΈΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ ΡΠΎ Π·Π½Π°ΡΠΈΠΌΡΠΌΠΈ Π³ΡΠ°Π½ΠΈΡΠ°ΠΌΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΏΡΠΎΠΊΡΡΡΠΊΠ° Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°Π΅ΡΡΡ Π² ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΎΡΡΠ°Π²Π»ΡΡ Π΅Π³ΠΎ ΡΠ°ΡΡΠΈΡΠ½ΠΎ Π²ΠΈΠ΄ΠΈΠΌΡΠΌ. ΠΡΠΈ Π²Π°ΡΠΈΠ°Π½ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ΡΡ Ρ ΠΎΡΠΎΡΠΎ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ.
ΠΠ΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Π΄ΠΎΠ»Π³ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ ΠΏΠΎΠ»Π°Π³Π°Π»ΠΈΡΡ Π½Π° ΡΠ΅ΡΠ΅Π½ΠΈΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ JavaScript Π΄Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠ²ΠΈΡΠΎΠΊ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠΎΡΡ ΡΡΡΡΠ°Π½ΠΈΡΡ ΡΡΠΎΡ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΠΊ. ΠΠ΄Π½Π°ΠΊΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ JavaScript Π½Π΅ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·-Π·Π° ΠΎΡΡΡΡΡΡΠ²ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΡΠΈΠΌΠΈΡΠΈΠ²Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΈΠ»ΠΈ Π΄ΠΎΡΡΡΠΏ ΠΊ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅. CSS Scroll Snap ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ Π±ΡΡΡΡΠΎΠ΅, ΡΠΎΡΠ½ΠΎΠ΅ ΠΈ ΠΏΡΠΎΡΡΠΎΠ΅ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ Π²ΠΎ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ .
CSS Scroll Snap ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π΅Π±-Π°Π²ΡΠΎΡΠ°ΠΌ ΠΎΡΠΌΠ΅ΡΠ°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π³ΡΠ°Π½ΠΈΡΠ°ΠΌΠΈ Π΄Π»Ρ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π½Π° ΠΊΠΎΡΠΎΡΡΡ Π½ΡΠΆΠ½ΠΎ Π·Π°ΠΊΠΎΠ½ΡΠΈΡΡ.ΠΠ°ΡΠ΅ΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π²ΡΠ±ΠΈΡΠ°ΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠ΅Π΅ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠ΅ΠΉ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΌΠ°ΠΊΠ΅Ρ ΠΈ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΠ΅ ΡΠ²Π΅Π΄Π΅Π½ΠΈΡ ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ, Π·Π°ΡΠ΅ΠΌ ΠΏΠ»Π°Π²Π½ΠΎ Π°Π½ΠΈΠΌΠΈΡΡΠΉΡΠ΅ Π΅Π³ΠΎ. ΠΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡΡ ΠΊ Π½Π°ΡΠ΅ΠΌΡ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌΡ ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π·Π°Π²Π΅ΡΡΠ°Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΠΊΠ°ΡΡΡΠ΅Π»ΠΈ, Π΅Π΅ Π²ΠΈΠ΄ΠΈΠΌΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΡΠ°Π΅Ρ Π½Π° ΠΌΠ΅ΡΡΠΎ. ΠΠ΅Ρ ΡΠ²ΠΈΡΠΊΠ° ΠΊΠΎΡΡΠ΅ΠΊΡΠΈΡΠΎΠ²ΠΊΠΈ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ Π΄Π»Ρ JavaScript.
ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ css scroll snap Ρ ΠΊΠ°ΡΡΡΠ΅Π»ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠ΄Π΅ΡΡ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ Π² ΠΊΠΎΠ½ΡΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. center Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅ΡΡΡ Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΌ ΡΠ΅Π½ΡΡΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.ΠΡΡΠΎΡΠΈΡ API
CSS Scroll Snap ΠΎΠ±ΡΡΠΆΠ΄Π°Π΅ΡΡΡ Π² Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
Π³ΠΎΠ΄Ρ. ΠΠ°ΠΊ
Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π½Π½ΠΈΠ΅ ΡΠ΅ΡΠ½ΠΎΠ²ΡΠ΅ Π²Π΅ΡΡΠΈΠΈ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΉ, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΎΠ½ΠΈ
ΠΏΡΠΎΡΠ΅Π» ΡΡΠ½Π΄Π°ΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½
ΠΌΠ΅Π½ΡΡΡ. Π
ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ» Π±Π°Π·ΠΎΠ²ΡΡ ΠΌΠΎΠ΄Π΅Π»Ρ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΡΠΎΡΠ΅ΠΊ Π½Π°
ΠΌΠΎΠ΄Π΅Π»Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ. ΠΡΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅Ρ, ΡΡΠΎ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡΡΡ Π±ΡΡΡΡΠΎ.
ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π±Π΅Π· Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ°ΡΡΠ΅ΡΠ° Π°Π²ΡΠΎΡΠ°ΠΌΠΈ
ΡΠΎΡΠΊΠΈ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ. ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌ Π»ΡΡΡΠ΅ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΎ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
Π΅.g., ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π·Π°Ρ
Π²Π°ΡΡΠ²Π°Ρ ΡΠ΅Π»ΠΈ, Π±ΠΎΠ»ΡΡΠΈΠ΅, ΡΠ΅ΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
Chrome, Opera ΠΈ Safari ΠΏΠΎΡΡΠ°Π²Π»ΡΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΠΏΠ»Π°Π½ΠΈΡΡΡΡΠΈΠ΅ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ ΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΡ Π² Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅ΠΌ Π±ΡΠ΄ΡΡΠ΅ΠΌ (ΠΡΠΈΠ±ΠΊΠ° Firefox, ΠΡΠΈΠ±ΠΊΠ° Edge).
ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ² Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅, Π² ΠΊΠΎΡΠΎΡΡΡ ΠΎΠ±ΡΡΠΆΠ΄Π°Π΅ΡΡΡ ΡΡΠ°ΡΡΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ. ΠΊΠΎΡΠΎΡΡΠΉ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π²ΡΠ΅ Π΅ΡΠ΅ ΡΠ΅Π°Π»ΠΈΠ·ΡΠ΅ΡΡΡ Edge ΠΈ Firefox.
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π°.ΠΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ — ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΏΠΎ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ Π² ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΏΠΎΡΠ»Π΅ Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π²ΠΊΠ»ΡΡΠ΅Π½ Π² ΡΠ΅ΠΆΠΈΠΌ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΈΠΏΠ° Ρ Π·Π°ΡΠ΅Π»ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎ. ΠΡΠΎ Π³ΠΎΠ²ΠΎΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΡΡΠΎ Π΅ΠΌΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΡΡΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΊ ΠΏΠΎΠ·ΠΈΡΠΈΡΠΌ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΌ Π΅Π³ΠΎ ΠΏΠΎΡΠΎΠΌΠΊΠ°ΠΌΠΈ. Ρ Π·Π°ΡΠ΅Π»ΠΊΠΎΠΉ
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΎΡΡ, ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠ°: x
, y
ΠΈΠ»ΠΈ ΠΈ
, ΠΈ
ΡΡΡΠΎΠ³ΠΎΡΡΡ ΡΠ΅Π»ΡΠΊΠ°: ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ
, ΠΏΡΠΈΠ±Π»ΠΈΠΆΠ΅Π½ΠΈΠ΅
. ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎΠ± ΡΡΠΎΠΌ ΠΏΠΎΠ·ΠΆΠ΅.
ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΎ ΠΏΡΡΠ΅ΠΌ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ³ΠΎ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠ° ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠΉ ΠΏΡΠ΅Π΄ΠΎΠΊ.
ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΡΡΠΎΠ²Π½Π΅Π½Ρ, ΠΊΠ°ΠΊ ΡΠΊΠ°Π·Π°Π½ΠΎ Π΄Π»Ρ Π΄Π°Π½Π½ΠΎΠΉ ΠΎΡΠΈ. Π
ΠΠ° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΎΡΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ:
Π½Π°ΡΠ°Π»ΠΎ
, ΠΊΠΎΠ½Π΅Ρ
, ΡΠ΅Π½ΡΡ
.
ΠΠ°ΡΠ°Π»ΠΎ
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΊΡΠ°ΠΉ Π½Π°ΡΠ°Π»Π° ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ΅Π½
Π±ΡΡΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΡΡΠΎΠ²Π½Π΅ Ρ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΌ ΠΊΡΠ°Π΅ΠΌ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π’ΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅ Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°ΡΡΡΡ
ΠΈ ΡΠ΅Π½ΡΡ
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΠΎΠ·Π½Π°ΡΠ°ΡΡ, ΡΡΠΎ ΠΊΡΠ°ΠΉ ΠΈΠ»ΠΈ ΡΠ΅Π½ΡΡ
Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π·Π°ΠΏΠΎΠ΄Π»ΠΈΡΠΎ Ρ ΡΠΎΡΡΠΎΠΌ ΠΈΠ»ΠΈ ΡΠ΅Π½ΡΡΠΎΠΌ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Snapport — ΡΡΠΎ ΠΎΠ±Π»Π°ΡΡΡ
ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΌΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡΡΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΡΠΎ
ΡΠΎ ΠΆΠ΅, ΡΡΠΎ ΠΈ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π½ΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ scroll-padding
.
Π‘Π»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈΠ»Π»ΡΡΡΡΠΈΡΡΡΡ, ΠΊΠ°ΠΊ ΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Ρ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅.
ΠΡΠΈΠΌΠ΅Ρ — ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ Π³Π°Π»Π΅ΡΠ΅Ρ
Π Π°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΠ°ΡΡΡΠ΅Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ
ΡΠΎΠ·Π΄Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΊΠ°ΡΡΡΠ΅Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅, ΠΌΡ
ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΡΡΠΎΠ±Ρ ΠΈΠΌΠ΅ΡΡ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠΈΠΏ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
Π½Π°
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΎΡΡ. ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ scroll-snap-align: center
, ΡΡΠΎΠ±Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ
ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° ΡΠ΅Π½ΡΡΠΈΡΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π½ΡΡΡΠΈ ΠΊΠ°ΡΡΡΠ΅Π»ΠΈ.
<ΡΡΠΈΠ»Ρ>
#gallery {
scroll-snap-type: x ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΉ;
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x: ΠΏΡΠΎΠΊΡΡΡΠΊΠ°;
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π³ΠΈΠ±ΠΊΠΈΠΉ;
}
#gallery img {
ΠΏΡΠΎΠΊΡΡΡΠΊΠ°-ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ°-Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅: ΠΏΠΎ ΡΠ΅Π½ΡΡΡ;
}
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΡΠ²ΡΠ·Π°Π½Ρ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ, Π°Π»Π³ΠΎΡΠΈΡΠΌ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠΌΠ½ΡΠΌ ΠΎ ΡΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΈ ΠΊΠ°ΠΊ ΠΎΠ½ ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ»ΡΡΠ°ΠΉ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΠΊΠ°ΡΡΡΠ΅Π»Ρ. ΠΠ°ΠΈΠ²Π½ΡΠΉ Π°Π»Π³ΠΎΡΠΈΡΠΌ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΌΠ΅ΡΠ°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠ°Π½ΠΎΡΠ°ΠΌΠΈΡΠΎΠ²Π°ΡΡ Π²ΠΎΠΊΡΡΠ³, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΏΠΎΠ»Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠΎ Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠ΅ Ρ Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΈ ΡΡΠ΅Π±ΡΠ΅Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ, ΡΡΠΎΠ±Ρ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΡΡ ΡΡΠΎΡ ΡΠ»ΡΡΠ°ΠΉ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ Π²ΠΎΠΊΡΡΠ³ ΡΡΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠ΅Π»ΠΊΠ°Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎ Π΅Π³ΠΎ ΠΊΡΠ°ΡΠΌ.
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎ | ΠΡΡΠΎΡΠ½ΠΈΠΊΠΡΠΈΠΌΠ΅Ρ — ΠΏΡΠΎΠΉΠ΄Π΅Π½Π½Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° ΠΏΡΠΎΠ΄ΡΠΊΡΠ°
ΠΡΠ΅ ΠΎΠ΄Π½ΠΈΠΌ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΌ ΡΠ»ΡΡΠ°Π΅ΠΌ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½Π° ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΊ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅, ΡΠ²Π»ΡΡΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Ρ
Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΡ
ΡΠ°Π·Π΄Π΅Π»ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΈΠΏΠΈΡΠ½ΡΠΉ
ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΡΠΎΠ΄ΡΠΊΡΠ°. scroll-snap-type: y ΠΏΡΠΈΠ±Π»ΠΈΠΆΠ΅Π½ΠΈΠ΅;
— Π±ΠΎΠ»Π΅Π΅ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π΄Π»Ρ ΡΠ΅Ρ
Π»ΠΎΠ².
ΠΊΠ°ΠΊ ΡΡΠΎ. ΠΡΠΎ Π½Π΅ ΠΌΠ΅ΡΠ°Π΅Ρ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅Ρ Π΄ΠΎ ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ
ΡΠ°Π·Π΄Π΅Π», Π½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ Π½ΠΎΠ²ΠΎΠΌΡ ΡΠ°Π·Π΄Π΅Π»Ρ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅
Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π±Π»ΠΈΠ·ΠΊΠΎ ΠΊ Π½Π΅ΠΌΡ.
ΠΠΎΡ ΠΊΠ°ΠΊ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΡΡΠΈΡΡ:
<ΡΡΠΈΠ»Ρ>
ΡΡΠ°ΡΡΡ {
scroll-snap-type: y Π±Π»ΠΈΠ·ΠΎΡΡΡ;
/ * ΠΠ°ΡΠ΅Π·Π΅ΡΠ²ΠΈΡΠΎΠ²Π°ΡΡ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΏΠ»ΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ° Π΄Π»Ρ ΠΏΠΎΠ΄Π³Π»ΡΠ΄ΡΠ²Π°Π½ΠΈΡ. * /
ΠΏΡΠΎΠΊΡΡΡΠΊΠ° ΡΠ²Π΅ΡΡ
Ρ: 15vh;
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-y: ΠΏΡΠΎΠΊΡΡΡΠΊΠ°;
}
ΡΠ°Π·Π΄Π΅Π» {
/ * ΠΠ°ΡΠ°Π»ΠΎ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ. * /
ΠΏΡΠΎΠΊΡΡΡΠΊΠ°-ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ°-Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅: Π½Π°ΡΠ°Π»ΠΎ;
}
header {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅;
Π²ΡΡΠΎΡΠ°: 10vh;
}
<ΡΡΠ°ΡΡΡ>
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ
Π Π°Π·Π΄Π΅Π» ΠΏΠ΅ΡΠ²ΡΠΉ
Π Π°Π·Π΄Π΅Π» Π²ΡΠΎΡΠΎΠΉ
Π Π°Π·Π΄Π΅Π» ΡΡΠ΅ΡΠΈΠΉ
ΠΠ°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΈ ΠΏΠΎΠ»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
Π£ Π½Π°ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΡΠΎΠ΄ΡΠΊΡΠ° Π²Π΅ΡΡ
Π½ΠΈΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ.
scroll-padding
— ΡΡΠΎ Π½ΠΎΠ²ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ css, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ
Π²ΠΈΠ΄ΠΈΠΌΠ°Ρ ΠΎΠ±Π»Π°ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΡΠΎΡ ΡΠ΅Π³ΠΈΠΎΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΈΠ·Π²Π΅ΡΡΠ΅Π½ ΠΊΠ°ΠΊ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΈ
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΡΠΈ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΠΈ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π²ΡΡΠ°Π²ΠΊΡ
Π½Π°ΠΏΡΠΎΡΠΈΠ² ΠΏΠΎΠ»Ρ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. Π Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ 15vh
Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ Π²ΡΡΠ°Π²ΠΊΠ°
Π±ΡΠ» Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ Π²Π²Π΅ΡΡ
Ρ, ΡΡΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ, 15vh
Π½ΠΈΠΆΠ΅ Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΊΠ°ΠΊ Π΅Π³ΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΠΊΡΠ°ΠΉ Π΄Π»Ρ
ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.ΠΡΠΈ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ΅ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΠΊΡΠ°ΠΉ ΡΠ΅Π»Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ Π±ΡΠ΄Π΅Ρ
ΠΏΠΎΠΊΡΠ°ΡΠ½Π΅ΡΠ΅ΡΡ Ρ ΡΡΠΎΠΉ Π½ΠΎΠ²ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠ΅ΠΉ, ΠΎΡΡΠ°Π²ΠΈΠ² ΠΌΠ΅ΡΡΠΎ Π½Π°Π²Π΅ΡΡ
Ρ.
scroll-margin
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΈΡΡ
ΠΎΠ΄Π½ΡΡ Π²Π΅Π»ΠΈΡΠΈΠ½Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΠ΅Π»ΠΈ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ
ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΠΏΠΎΠ»Π΅, Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎΠ΅ ΡΠΎΠΌΡ, ΠΊΠ°ΠΊ scroll-padding
ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ Snap scroll
ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ.
ΠΡ ΠΌΠΎΠ³Π»ΠΈ Π·Π°ΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Ρ ΡΡΠΈΡ
Π΄Π²ΡΡ
ΡΠ²ΠΎΠΉΡΡΠ² Π½Π΅Ρ ΡΠ»ΠΎΠ²Π° Β« snap
Β» Π²
ΠΈΡ
. ΠΡΠΎ ΡΠ΄Π΅Π»Π°Π½ΠΎ Π½Π°ΠΌΠ΅ΡΠ΅Π½Π½ΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΠΏΠΎΠ»Π΅ Π΄Π»Ρ Π²ΡΠ΅Ρ
ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΡ
ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π° Π½Π΅ ΠΏΡΠΎΡΡΠΎ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Chrome Π±Π΅ΡΠ΅Ρ
ΠΈΡ
Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΡΠΈΡΡΠ²Π°ΡΡ ΠΏΡΠΈ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΡΠ°Π½ΠΈΡΡ Π΄Π»Ρ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡ, ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ
ΠΊΠ°ΠΊ PageDown ΠΈ PageUp, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈ ΡΠ°ΡΡΠ΅ΡΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄Π»Ρ Element.scrollIntoView ()
ΠΎΠΏΠ΅ΡΠ°ΡΠΈΡ.
API ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ DOM
ΠΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ ΠΏΠΎΡΠ»Π΅ Π²ΡΠ΅Ρ
ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠ΅
ΠΈΠ½ΠΈΡΠΈΠΈΡΠΎΠ²Π°Π½ ΡΡΠ΅Π½Π°ΡΠΈΠ΅ΠΌ. ΠΠΎΠ³Π΄Π° Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΠ°ΠΊΠΈΠ΅ API, ΠΊΠ°ΠΊ Element.
,
Π±ΡΠ°ΡΠ·Π΅Ρ Π²ΡΡΠΈΡΠ»ΠΈΡ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΈ, Π° Π·Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡ
ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ°Ρ Π»ΠΎΠ³ΠΈΠΊΠ° ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ, ΡΡΠΎΠ±Ρ Π½Π°ΠΉΡΠΈ ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ.Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π΅ΡΡΡ
Π½Π΅Ρ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΡΠ΅Π½Π°ΡΠΈΠΉ Π²ΡΠΏΠΎΠ»Π½ΡΠ» ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ ΡΡΡΠ½ΡΠ΅ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΡ Π΄Π»Ρ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ.
ΠΠ»Π°Π²Π½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ°
ΠΠ»Π°Π²Π½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° ΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΡΠΈ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π΅Π³ΠΎ ΠΌΠ΅ΡΡΠΎ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΡ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΡΡΡ ΠΎΡΡΠΎΠ³ΠΎΠ½Π°Π»ΡΠ½ΡΠ΅ Π°ΡΠΏΠ΅ΠΊΡΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Ρ, ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΠΌΠ΅ΡΡΠ΅ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΡΡΡ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°.
ΠΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΡΠΈ ΠΏΡΠ΅Π²ΡΡΠ΅Π½ΠΈΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
API ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ Overscroll ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΡΠ΅Ρ, ΠΊΠ°ΠΊ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° ΠΏΡΠΈΠ²ΡΠ·Π°Π½Π° ΠΊ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΠΈ Π½Π° Π½Π΅Π΅ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° ΡΠ΅Π»ΡΠΎΠΊ.
ΠΡΠ΅Π΄ΠΎΡΡΠ΅ΡΠ΅ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΏΠ΅ΡΠ΅Π΄ΠΎΠ²ΠΎΠΉ ΠΎΠΏΡΡ
ΠΠ·Π±Π΅Π³Π°ΠΉΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ, ΠΊΠΎΠ³Π΄Π° ΡΠ΅Π»Π΅Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΈΡΠΎΠΊΠΎ ΡΠ°Π·Π½Π΅ΡΠ΅Π½Ρ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡΠΌΠΈ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΡΡΠ°Π½Π΅Ρ Π½Π΅Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌ.
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ CSS.supports
Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΡΠ½ΠΊΡΠΈΠΈ CSS Scroll Snap. ΠΠΎ ΠΈΠ·Π±Π΅Π³Π°ΠΉΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Ρ Π·Π°ΡΠ΅Π»ΠΊΠΎΠΉ ΡΠΈΠΏΠ°
, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ Π² ΡΡΡΠ°ΡΠ΅Π²ΡΠ΅ΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΠΈ ΠΌΠΎΠΆΠ΅Ρ
Π±ΡΡΡ Π½Π΅Π½Π°Π΄Π΅ΠΆΠ½ΡΠΌ.
if (CSS.supports ('scroll-snap-align: start')) {
// ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ css scroll snap
} Π΅ΡΠ΅ {
// ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π·Π°ΠΏΠ°ΡΠ½ΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ
}
ΠΠ΅ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°ΠΉΡΠ΅, ΡΡΠΎ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ API, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Element.scrollTo
Π²ΡΠ΅Π³Π΄Π° Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°ΡΡ Ρ Π·Π°ΠΏΡΠΎΡΠ΅Π½Π½ΡΠΌ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΌΠΎΠΆΠ΅Ρ ΡΠ΅Π³ΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ
ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΠΎΡΠ»Π΅ Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΡΠΎ Π½Π΅ Π±ΡΠ»ΠΎ
Ρ
ΠΎΡΠΎΡΠ΅Π΅ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΄Π°ΠΆΠ΅ Π΄ΠΎ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° ΠΌΠΎΠ³Π»Π° Π±ΡΡΡ
ΠΏΡΠ΅ΡΠ²Π°Π½ΠΎ ΠΏΠΎ Π΄ΡΡΠ³ΠΈΠΌ ΠΏΡΠΈΡΠΈΠ½Π°ΠΌ, Π½ΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π² ΡΠ»ΡΡΠ°Π΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
ΡΠ΅Π»ΡΠΎΠΊ.
ΠΡΠ΄ΡΡΠΈΠ΅ ΡΠ°Π±ΠΎΡΡ
Chrome 69 ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ, ΡΠΊΠ°Π·Π°Π½Π½ΡΠ΅ Π² CSS Scroll Snap. Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠ΅ Ρ Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΈ. ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠΏΡΡΠ΅Π½ΠΈΡ — ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° Π΄Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ ΠΈ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ°ΡΠ½ΡΠ΅ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π½ΠΈΠΊΠ°ΠΊΠΈΠΌΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ. Π‘ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½Π΅ΠΌ Chrome Π±ΡΠ΄Π΅Ρ ΡΠ»ΡΡΡΠ°ΡΡ ΡΡΡ ΡΡΠ½ΠΊΡΠΈΡ, ΡΠ΄Π΅Π»ΡΡ ΠΎΡΠΎΠ±ΠΎΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΎΡΡΡΡΡΡΠ²ΡΡΡΠΈΠΌ ΡΡΠ½ΠΊΡΠΈΡΠΌ, ΡΠ»ΡΡΡΠ°Ρ Π°Π»Π³ΠΎΡΠΈΡΠΌ Π²ΡΠ±ΠΎΡΠ° ΠΌΠΎΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ½ΠΈΠΌΠΊΠ°, ΠΏΠ»Π°Π²Π½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ devtools.
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
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΠ΅ΡΡ Π¦ΡΠΊΡΡΠ΅Π½
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ
- 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
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
CSS Scroll Anchoring Module Level 1
CSS Scroll Anchoring Module Level 1ΠΠ±ΡΡΡΠ°ΠΊΡΠ½ΡΠ΅
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ
DOM Π½Π°Π΄ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΡΡ ΠΏΠΎΠ»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΌΠΎΠ³ΡΡ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΠΎΠΊΠ° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ.
ΠΡΠ° ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ Π΄Π»Ρ ΡΠΌΡΠ³ΡΠ΅Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΡΠ°Π·Π΄ΡΠ°ΠΆΠ°ΡΡΠ΅Π³ΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ. ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ·Π»Π° ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΠ΅Π³ΡΠ»ΠΈΡΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
Π ΡΡΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΡΡΡ API, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠΉ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΠΎΡΠΊΠ°Π·Π°ΡΡΡΡ ΠΎΡ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ.
CSS — ΡΡΠΎ ΡΠ·ΡΠΊ Π΄Π»Ρ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° ΡΡΡΡΠΊΡΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ². (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, HTML ΠΈ XML) Π½Π° ΡΠΊΡΠ°Π½Π΅, Π½Π° Π±ΡΠΌΠ°Π³Π΅ ΠΈ Ρ. Π΄.Π‘ΡΠ°ΡΡΡ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°
Π ΡΡΠΎΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΎΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ ΡΡΠ°ΡΡΡ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° Π½Π° ΠΌΠΎΠΌΠ΅Π½Ρ Π΅Π³ΠΎ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΠΈ.ΠΡΡΠ³ΠΈΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ ΠΌΠΎΠ³ΡΡ Π·Π°ΠΌΠ΅Π½ΡΡΡ ΡΡΠΎΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ. Π‘ΠΏΠΈΡΠΎΠΊ ΡΠ΅ΠΊΡΡΠΈΡ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΠΉ W3C ΠΈ ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΈΡ ΡΡΠΎΠ³ΠΎ ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΎΡΡΠ΅ΡΠ° ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π² ΡΠΊΠ°Π·Π°ΡΠ΅Π»Π΅ ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΡ ΠΎΡΡΠ΅ΡΠΎΠ² W3C ΠΏΠΎ Π°Π΄ΡΠ΅ΡΡ https://www.w3.org/TR/.
ΠΡΠΎΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ Π±ΡΠ» ΠΎΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ Π Π°Π±ΠΎΡΠ΅ΠΉ Π³ΡΡΠΏΠΏΠΎΠΉ CSS Π² Π²ΠΈΠ΄Π΅ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ° . ΠΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΡ ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΎΠ΅ΠΊΡ Π½Π΅ ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅Ρ ΠΎΠ΄ΠΎΠ±ΡΠ΅Π½ΠΈΡ Π§Π»Π΅Π½ΡΡΠ²ΠΎΠΌ W3C.
ΠΡΠΎ ΡΠ΅ΡΠ½ΠΎΠ²ΠΈΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½, Π·Π°ΠΌΠ΅Π½Π΅Π½ ΠΈΠ»ΠΈ ΡΡΡΠ°ΡΠ΅Π»ΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π² Π»ΡΠ±ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ.ΠΠ΅ΡΠΌΠ΅ΡΡΠ½ΠΎ ΡΡΡΠ»Π°ΡΡΡΡ Π½Π° ΡΡΠΎΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΠΊΠ°ΠΊ Π½Π° Π½Π΅Π·Π°Π²Π΅ΡΡΠ΅Π½Π½ΡΡ ΡΠ°Π±ΠΎΡΡ.
ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΠΎΡΠΏΡΠ°Π²ΡΡΠ΅ ΠΎΡΠ·ΡΠ² ΠΏΡΡΠ΅ΠΌ ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΈΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌ Π² GitHub (ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ), Π²ΠΊΠ»ΡΡΠ°Ρ ΠΊΠΎΠ΄ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ Β«css-scroll-anchoringΒ» Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ: Β«[Css-scroll-anchoring] β¦ ΠΊΡΠ°ΡΠΊΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡβ¦ Β». ΠΡΠ΅ Π²ΠΎΠΏΡΠΎΡΡ ΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ Ρ ΡΠ°Π½ΡΡΡΡ Π² Π°ΡΡ ΠΈΠ²Π΅. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΎΡΠ·ΡΠ²Ρ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠΏΡΠ°Π²ΠΈΡΡ Π² (Π·Π°Π°ΡΡ ΠΈΠ²ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ) ΠΎΠ±ΡΠ΅Π΄ΠΎΡΡΡΠΏΠ½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ ΡΠ°ΡΡΡΠ»ΠΊΠΈ [email protected].
ΠΡΠΎΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΡΠ΅Π³ΡΠ»ΠΈΡΡΠ΅ΡΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΌ W3C ΠΎΡ 15 ΡΠ΅Π½ΡΡΠ±ΡΡ 2020 Π³ΠΎΠ΄Π°.
ΠΡΠΎΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ Π±ΡΠ» ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²Π»Π΅Π½ Π³ΡΡΠΏΠΏΠΎΠΉ, Π΄Π΅ΠΉΡΡΠ²ΡΡΡΠ΅ΠΉ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΠ°ΡΠ΅Π½ΡΠ½ΠΎΠΉ ΠΏΠΎΠ»ΠΈΡΠΈΠΊΠΎΠΉ W3C.
W3C Π²Π΅Π΄Π΅Ρ ΠΏΡΠ±Π»ΠΈΡΠ½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ Π»ΡΠ±ΡΡ
ΡΠ°ΡΠΊΡΡΡΠΈΠΉ ΠΏΠ°ΡΠ΅Π½ΡΠΎΠ², ΡΠ΄Π΅Π»Π°Π½Π½ΡΡ
Π² ΡΠ²ΡΠ·ΠΈ Ρ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°ΠΌΠΈ ΡΠ°Π±ΠΎΡΡ Π³ΡΡΠΏΠΏΡ;
ΡΡΠ° ΡΡΡΠ°Π½ΠΈΡΠ° ΡΠ°ΠΊΠΆΠ΅ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΠΈ ΠΏΠΎ ΡΠ°ΡΠΊΡΡΡΠΈΡ ΠΏΠ°ΡΠ΅Π½ΡΠ°.
ΠΠΈΡΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π·Π½Π°Π΅Ρ ΠΎ ΠΏΠ°ΡΠ΅Π½ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ, ΠΏΠΎ Π΅Π³ΠΎ ΠΌΠ½Π΅Π½ΠΈΡ,
ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΏΡΠ΅ΡΠ΅Π½Π·ΠΈΠΈ, Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠ°Π·Π΄Π΅Π»ΠΎΠΌ 6 ΠΠ°ΡΠ΅Π½ΡΠ½ΠΎΠΉ ΠΏΠΎΠ»ΠΈΡΠΈΠΊΠΈ W3C.
Π‘ΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
- 1. ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅
- 1.1 ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ
- 2 ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅
- 2.1 ΠΡΠ±ΠΎΡ ΡΠ·Π»Π° ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ
- 2.2 Π Π΅Π³ΡΠ»ΠΈΡΠΎΠ²ΠΊΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
- 2.2.1 ΠΠΊΠ½ΠΎ ΠΏΠΎΠ΄Π°Π²Π»Π΅Π½ΠΈΡ
- 2.2.2 Π’ΡΠΈΠ³Π³Π΅ΡΡ ΠΏΠΎΠ΄Π°Π²Π»Π΅Π½ΠΈΡ
- 3 ΠΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ API
- 4 ΠΠΎΠΏΡΠΎΡΡ ΠΊΠΎΠ½ΡΠΈΠ΄Π΅Π½ΡΠΈΠ°Π»ΡΠ½ΠΎΡΡΠΈ ΠΈ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡΠΈ
- ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ
- ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Ρ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΎΡ 11 ΡΠ΅Π²ΡΠ°Π»Ρ 2020 Π³.
- Π‘ΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠ΅
- Π£ΡΠ»ΠΎΠ²Π½ΡΠ΅ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅
- ΠΠ»Π°ΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡ
- Π§Π°ΡΡΠΈΡΠ½ΡΠ΅ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ
- Π Π΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π½Π΅ΡΡΠ°Π±ΠΈΠ»ΡΠ½ΡΡ ΠΈ ΠΏΡΠΎΠΏΡΠΈΠ΅ΡΠ°ΡΠ½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ
- ΠΠ΅ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ
- ΠΠ½Π΄Π΅ΠΊΡ
- Π’Π΅ΡΠΌΠΈΠ½Ρ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ Π² Π΄Π°Π½Π½ΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ
- Π’Π΅ΡΠΌΠΈΠ½Ρ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΎΠΉ
- Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ
- ΠΠΎΡΠΌΠ°ΡΠΈΠ²Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ
- ΠΠ½Π΄Π΅ΠΊΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΡΡΠΈ
1.ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅
Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ° ΡΠ°ΡΡΠΎ ΠΎΡΠ²Π»Π΅ΠΊΠ°ΡΡΡΡ Π½Π° ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΠΈΠΉΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ. ΠΈΠ·-Π·Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΡΡΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΡΠΈΠΌΠ΅ΡΡ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΡΠΊΡΠΈΠΏΡ, Π²ΡΡΠ°Π²Π»ΡΡΡΠΈΠΉ iframe, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ ΡΠ΅ΠΊΠ»Π°ΠΌΡ, ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±Π΅Π· ΡΠ°Π·ΠΌΠ΅ΡΠ° Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ Π² ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠΉ ΡΠ΅ΡΠΈ.
ΠΡΡΠΎΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π±ΡΠ»ΠΎ Π΄Π»Ρ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΡΠΈ ΡΠ°ΠΊΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡΡ . ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ, ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ° ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΏΡΡΠ°ΡΡΡΡ Π·Π°ΡΠ΅Π·Π΅ΡΠ²ΠΈΡΠΎΠ²Π°ΡΡ ΠΌΠ΅ΡΡΠΎ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π΄Π»Ρ Π²ΡΠ΅Π³ΠΎ, ΡΡΠΎ Π·Π°Π³ΡΡΠ·ΠΈΡΡΡ ΠΏΠΎΠ·ΠΆΠ΅.ΠΠ° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡΡ Π΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ.
ΠΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΡΠΈΠ·Π²Π°Π½Π° ΡΠ²Π΅ΡΡΠΈ ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡΠΌΡ Π½Π΅ΠΎΠΆΠΈΠ΄Π°Π½Π½ΡΠ΅ ΡΠ΄Π²ΠΈΠ³ΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°.
ΠΠ½ Π΄Π΅Π»Π°Π΅Ρ ΡΡΠΎ, ΡΠ΅Π³ΡΠ»ΠΈΡΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
ΡΡΠΎΠ±Ρ ΠΊΠΎΠΌΠΏΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π²Π½Π΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
ΠΠ±ΡΡΡΠ½ΡΡΡΠΈΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ Π΄Π°Π΅Ρ Π½Π΅ΡΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΎΠ±Π·ΠΎΡ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
1.1. ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ
ΠΡΠ° ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠΎΠ³Π»Π°ΡΠ΅Π½ΠΈΡΠΌ ΠΎΠ± ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ² CSS ΠΈΠ· [CSS2] Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΈΠ· [CSS-VALUES-3].Π’ΠΈΠΏΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, Π½Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ Π² ΡΡΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ Π² CSS Values ββ& Units [CSS-VALUES-3]. ΠΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΌΠΎΠ΄ΡΠ»ΡΠΌΠΈ CSS ΠΌΠΎΠΆΠ΅Ρ ΡΠ°ΡΡΠΈΡΠΈΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΡΠΈΡ ΡΠΈΠΏΠΎΠ² Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ.
Π Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌ Π΄Π»Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ², ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΠΌ Π² ΠΈΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡΡ , Π²ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ Π² ΡΡΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π° CSS Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°. ΠΠ»Ρ ΡΠ΄ΠΎΠ±ΡΡΠ²Π° ΡΡΠ΅Π½ΠΈΡ ΠΎΠ½ΠΈ ΡΠ²Π½ΠΎ Π½Π΅ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ.
2. ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅
ΠΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΡΡΠ°Π΅ΡΡΡ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΡΠ°Π±ΠΈΠ»ΡΠ½ΠΎΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΌΠ°ΠΊΠ΅ΡΠ°.ΠΠ½ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, Π²ΡΠ±ΠΈΡΠ°Ρ ΡΠ·Π΅Π» DOM (ΡΠ·Π΅Π» ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ) Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
ΠΠ΄Π½Π°ΠΊΠΎ, Π΅ΡΠ»ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΏΡΠΈΠ²ΡΠ·Π°Π½ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, (ΡΠΌ. [CSS-SCROLL-SNAP-1]) ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π° Π½Π°ΡΡΡΠΎΠΉΠΊΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½Ρ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠΉ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΎΠΉ.
2.1. ΠΡΠ±ΠΎΡ ΡΠ·Π»Π° ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ
ΠΠ°ΠΆΠ΄ΠΎΠ΅ ΠΏΠΎΠ»Π΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΎ Π½Π° Π²ΡΠ±ΠΎΡ ΡΠ·Π»Π° ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π³Π»ΡΠ±ΠΎΠΊΠΎ Π² DOM. ΠΈ Π»ΠΈΠ±ΠΎ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ ΠΊΠ°ΠΊ Π²Π°ΠΆΠ½ΡΠΉ ΡΠ·Π΅Π» DOM, Π»ΠΈΠ±ΠΎ Π±Π»ΠΈΠ·ΠΎΠΊ ΠΊ Π±Π»ΠΎΠΊΠΈΡΠΎΠ²Π°ΡΡ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΠΊΡΠ°ΠΉ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΡΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ Π°Π³Π΅Π½Ρ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΠΏΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΏΠΎΠ»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ½Π° ΠΎΠ±Π»Π°ΡΡΠΈ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
Π£Π·Π΅Π» ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π»ΡΠ±ΡΠΌ Π±Π»ΠΎΠΊΠΎΠΌ, ΠΊΡΠΎΠΌΠ΅ Π½Π΅Π°ΡΠΎΠΌΠ°ΡΠ½ΠΎΠ³ΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ³ΠΎ. Π£Π·Π΅Π» ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ Π²ΡΠ΅Π³Π΄Π° ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠΌ ΠΏΠΎΠ»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. Π Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ»ΡΡΠ°ΡΡ ΠΏΠΎΠ»Π΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΌΠΎΠΆΠ΅Ρ Π½Π΅ Π²ΡΠ±ΠΈΡΠ°ΡΡ Π½ΠΈ ΠΎΠ΄ΠΈΠ½ ΡΠ·Π΅Π» ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ.
ΠΠ»Π΅ΠΌΠ΅Π½Ρ C ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΆΠΈΠ·Π½Π΅ΡΠΏΠΎΡΠΎΠ±Π½ΡΠΌ ΠΊΠ°Π½Π΄ΠΈΠ΄Π°ΡΠΎΠΌ Π½Π° ΡΠΎ, ΡΡΠΎΠ±Ρ ΡΡΠ°ΡΡ ΡΠΊΠΎΡΠ΅ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄Π»Ρ ΠΏΠΎΠ»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ S , Π΅ΡΠ»ΠΈ ΠΎΠ½ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ Π²ΡΠ΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΊΡΠΈΡΠ΅ΡΠΈΠΈ:
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΠΈΡΠ°ΡΡΡΡ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠ½ΡΠΌΠΈ ΠΊΠ°Π½Π΄ΠΈΠ΄Π°ΡΠ°ΠΌΠΈ Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠ° ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ:
Π―ΠΊΠΎΡΡ DOM Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.
ΠΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ ΡΠ΅ΠΊΡΡΠ΅Π΅ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ΅ ΡΠΎΠ²ΠΏΠ°Π΄Π΅Π½ΠΈΠ΅ Π°Π»Π³ΠΎΡΠΈΡΠΌ ΠΏΠΎΠΈΡΠΊΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π°Π³Π΅Π½ΡΠ° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. ΠΡΠ»ΠΈ ΡΠΎΠ²ΠΏΠ°Π΄Π΅Π½ΠΈΠ΅ ΠΎΡ Π²Π°ΡΡΠ²Π°Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠ°ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π΅ΡΠ»ΠΈ ΠΊΠ°Π½Π΄ΠΈΠ΄Π°Ρ Ρ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠΎΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π΅Π°ΡΠΎΠΌΠ°ΡΠ½ΡΠΌ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ, ΡΠΎ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΡΠ΅ Π΅Π³ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ-ΠΏΡΠ΅Π΄ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π΅Π°ΡΠΎΠΌΠ°ΡΠ½ΡΠΉ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΠΊΠ°Π½Π΄ΠΈΠ΄Π°ΡΠ°.
ΠΠ»Π³ΠΎΡΠΈΡΠΌ Π²ΡΠ±ΠΎΡΠ° ΡΠ·Π»Π° ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ Π΄Π»Ρ ΠΏΠΎΠ»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ S Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:ΠΡΠ»ΠΈ S ΡΠ²ΡΠ·Π°Π½ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΡΡΠ΅ Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow-anchor ΡΠ°Π²Π½ΠΎ none, ΡΠΎΠ³Π΄Π° Π½Π΅ Π²ΡΠ±ΠΈΡΠ°ΠΉΡΠ΅ ΡΠ·Π΅Π» ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ Π΄Π»Ρ S .
Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΠΊΠ°Π½Π΄ΠΈΠ΄Π°ΡΠ° ΠΠ Π² ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, ΠΏΡΠΎΠ²Π΅ΡΡΡΠ΅, ΡΠ²Π»ΡΠ΅ΡΡΡ Π»ΠΈ PC ΠΆΠΈΠ·Π½Π΅ΡΠΏΠΎΡΠΎΠ±Π½ΡΠΌ ΠΊΠ°Π½Π΄ΠΈΠ΄Π°ΡΠΎΠΌ Π² S . ΠΡΠ»ΠΈ Π΄Π°, Π²ΡΠ±Π΅ΡΠΈΡΠ΅ Π΅Π³ΠΎ ΠΊΠ°ΠΊ Π·Π°ΠΊΡΠ΅ΠΏΠΈΡΡ ΡΠ·Π΅Π» ΠΈ ΠΏΡΠ΅ΠΊΡΠ°ΡΠΈΡΡ.
Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π΄ΠΎΡΠ΅ΡΠ½Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° DOM N ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ»ΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΡΠ²ΡΠ·Π°Π½Π½ΠΎΠ³ΠΎ Ρ S , Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π°Π»Π³ΠΎΡΠΈΡΠΌ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ ΠΊΠ°Π½Π΄ΠΈΠ΄Π°ΡΠΎΠ² Π΄Π»Ρ N Π² S , ΠΈ Π·Π°Π²Π΅ΡΡΠ°Π΅ΡΡΡ, Π΅ΡΠ»ΠΈ Π²ΡΠ±ΠΈΡΠ°Π΅ΡΡΡ ΡΠ·Π΅Π» ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ.
ΠΡΠ»ΠΈ N — ΠΈΡΠΊΠ»ΡΡΠ΅Π½Π½ΠΎΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠ΅Π²ΠΎ, ΠΈΠ»ΠΈ Π΅ΡΠ»ΠΈ N ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½ Π² S , Π·Π°ΡΠ΅ΠΌ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ Π΄Π΅Π»Π°ΡΡ ( N ΠΈ Π΅Π³ΠΎ ΠΏΠΎΡΠΎΠΌΠΊΠΈ ΠΏΡΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ).
ΠΡΠ»ΠΈ N ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π²ΠΈΠ΄Π΅Π½ Π² S , Π²ΡΠ±Π΅ΡΠΈΡΠ΅ N Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠ·Π»Π° ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ.
ΠΡΠ»ΠΈ N ΡΠ°ΡΡΠΈΡΠ½ΠΎ Π²ΠΈΠ΄Π΅Π½:
ΠΠ»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ΅Π±Π΅Π½ΠΊΠ° DOM C ΠΈΠ· N , Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π°Π»Π³ΠΎΡΠΈΡΠΌ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ ΠΊΠ°Π½Π΄ΠΈΠ΄Π°ΡΠΎΠ² Π΄Π»Ρ C Π² S , ΠΈ Π·Π°Π²Π΅ΡΡΠ°Π΅ΡΡΡ, Π΅ΡΠ»ΠΈ Π²ΡΠ±ΠΈΡΠ°Π΅ΡΡΡ ΡΠ·Π΅Π» ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ.
ΠΠ»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° A , ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ N , Π½ΠΎ ΡΠ΅ΠΉ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ DOM Π½Π΅ N , Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π°Π»Π³ΠΎΡΠΈΡΠΌ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ ΠΊΠ°Π½Π΄ΠΈΠ΄Π°ΡΠΎΠ² Π΄Π»Ρ A Π² S , ΠΈ Π·Π°Π²Π΅ΡΡΠ°Π΅ΡΡΡ, Π΅ΡΠ»ΠΈ Π²ΡΠ±ΠΈΡΠ°Π΅ΡΡΡ ΡΠ·Π΅Π» ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ.
ΠΡΠ±Π΅ΡΠΈΡΠ΅ N Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠ·Π»Π° ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ. (ΠΡΠ»ΠΈ ΡΡΠΎΡ ΡΠ°Π³ Π΄ΠΎΡΡΠΈΠ³Π½ΡΡ, ΡΡΠ΅Π΄ΠΈ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ² N Π½Π΅ Π±ΡΠ»ΠΎ Π½Π°ΠΉΠ΄Π΅Π½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠ΅Π³ΠΎ ΡΠΊΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ·Π»Π°.)
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π±ΠΎΠ»Π΅Π΅ Π³Π»ΡΠ±ΠΎΠΊΠΈΠ΅ ΡΠ·Π»Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½Π΅Π΅, ΡΡΠΎΠ±Ρ ΡΠ²Π΅ΡΡΠΈ ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡΠΌΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π²Π½ΡΡΡΠΈ ΡΠ·Π»Π° ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ, Π½ΠΎ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΡΠΎ ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ Π²ΠΈΠ΄ΠΈΠΌΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π΅Π· Π°ΠΊΡΠΈΠ²Π°ΡΠΈΠΈ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
ΠΠΎΠ½ΡΠ΅ΠΏΡΡΠ°Π»ΡΠ½ΠΎ, Π½ΠΎΠ²ΡΠΉ ΡΠ·Π΅Π» ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ Π²ΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΠΎΠ»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. Π²ΡΡΠΊΠΈΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΏΠΎΠ»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.(Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ΄ΠΎΠΆΠ΄Π°ΡΡ, ΠΏΠΎΠΊΠ° ΡΠ·Π΅Π» ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ Π½Π΅ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ, ΠΏΠ΅ΡΠ΅Π΄ Π΅Π³ΠΎ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΠ΅ΠΌ.)
Π£Π·Π΅Π» DOM N ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΈΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΠΌ ΠΏΠΎΠ΄Π΄Π΅ΡΠ΅Π²ΠΎΠΌ , Π΅ΡΠ»ΠΈ ΠΎΠ½ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΠΈ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ Π»ΡΠ±ΠΎΠ΅ ΠΈΠ· ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΡΠ»ΠΎΠ²ΠΈΠΉ:2.2. Π Π΅Π³ΡΠ»ΠΈΡΠΎΠ²ΠΊΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
ΠΡΠ»ΠΈ Π±ΡΠ» Π²ΡΠ±ΡΠ°Π½ ΡΠ·Π΅Π» ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ,
Π·Π°ΡΠ΅ΠΌ, ΠΊΠΎΠ³Π΄Π° ΡΠ·Π΅Π» ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ,
Π±ΡΠ°ΡΠ·Π΅Ρ Π²ΡΡΠΈΡΠ»ΡΠ΅Ρ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ y0
ΠΈ ΡΠ΅ΠΊΡΡΠ΅Π΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ y1
,
Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ Π±Π»ΠΎΠΊΠ° ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°ΡΡΠ΅Π³ΠΎ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ° ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΠ·Π»Π° ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ,
ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ Π±Π»ΠΎΠΊΠ° ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π² Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ ΠΏΠΎΡΠΎΠΊΠ° Π±Π»ΠΎΠΊΠ° ΡΠΊΡΠΎΠ»Π»Π΅ΡΠ°.
ΠΠ°ΡΠ΅ΠΌ ΠΎΠ½ ΡΡΠ°Π²ΠΈΡ Π² ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΠΊΠΎΡΡΠ΅ΠΊΡΠΈΡΠΎΠ²ΠΊΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ y1 - y0
,
Π² Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ ΠΏΠΎΡΠΎΠΊΠ° Π±Π»ΠΎΠΊΠ°,
Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ ΠΎΠΊΠ½Π° ΠΏΠΎΠ΄Π°Π²Π»Π΅Π½ΠΈΡ.
Π Π΅Π³ΡΠ»ΠΈΡΠΎΠ²ΠΊΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ — ΡΡΠΎ ΡΠΈΠΏ [[cssom-view-1 # scrolling-events # scrolling]], ΠΊΠ°ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ Π² [CSSOM-VIEW],
ΠΈ Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ ΡΠΎΠ±ΡΡΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΎΠΏΠΈΡΠ°Π½Π½ΡΠΌ Π·Π΄Π΅ΡΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ.
2.2.1. ΠΠΊΠ½ΠΎ ΠΏΠΎΠ΄Π°Π²Π»Π΅Π½ΠΈΡ
ΠΠ°ΠΆΠ΄ΠΎΠ΅ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΡΠ·Π»Π° ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π°. Π²ΡΠ·Π²Π°Π» ΠΎΠΊΠ½ΠΎ ΠΏΠΎΠ΄Π°Π²Π»Π΅Π½ΠΈΡ , ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
ΠΠΊΠ½ΠΎ ΠΏΠΎΠ΄Π°Π²Π»Π΅Π½ΠΈΡ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Π² Π½Π°ΡΠ°Π»Π΅ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΠΈΡΠ΅ΡΠ°ΡΠΈΠΈ ΡΠΈΠΊΠ»Π° ΡΠΎΠ±ΡΡΠΈΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ HTML, ΠΈΠ»ΠΈ Π² ΠΊΠΎΠ½ΡΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ Π·Π°Π²Π΅ΡΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π° ΠΏΠΎΠ΄Π°Π²Π»Π΅Π½ΠΈΡ, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π±ΡΠ»ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ·Π΄Π½ΠΈΠΌ.
ΠΠΊΠ½ΠΎ ΠΏΠΎΠ΄Π°Π²Π»Π΅Π½ΠΈΡ Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°Π΅ΡΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΠΈΡΠ΅ΡΠ°ΡΠΈΠΈ ΡΠΈΠΊΠ»Π° ΡΠΎΠ±ΡΡΠΈΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ HTML, ΠΈΠ»ΠΈ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠ΅ΠΉ, ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΠΈΠ»ΠΈ ΠΏΠΎΠ±ΠΎΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ ΠΊΠΎΡΠΎΡΠΎΠΉ Π±ΡΠ΄Π΅Ρ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΡΠ·ΠΎΠ²
getBoundingClientRect ()
), Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π½Π°ΡΡΡΠΏΠΈΡ ΡΠ°Π½ΡΡΠ΅.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΡΠ°Π½ΠΈΡΡ ΠΎΠΊΠ½Π° ΠΏΠΎΠ΄Π°Π²Π»Π΅Π½ΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π²ΠΊΠ»ΡΡΠ΅Π½Ρ Π² ΡΡΠ°Π½Π΄Π°ΡΡ HTML ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ API ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΡΠ°Π±ΠΈΠ»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½.
Π ΠΎΠ΄Π½ΠΎΠΌ ΠΎΠΊΠ½Π΅ ΠΏΠΎΠ΄Π°Π²Π»Π΅Π½ΠΈΡ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ ΡΠ·Π»Π° ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ.
Π ΠΊΠΎΠ½ΡΠ΅ ΠΎΠΊΠ½Π° ΠΏΠΎΠ΄Π°Π²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ Π°Π³Π΅Π½Ρ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ Π²ΡΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ»ΠΈ ΠΏΠΎΡΡΠ°Π²Π»Π΅Π½Ρ Π² ΠΎΡΠ΅ΡΠ΅Π΄Ρ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΠΎΠΊΠ½Π° ΠΈ Π½Π΅ ΠΏΠΎΠ΄Π°Π²Π»ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ ΡΡΠΈΠ³Π³Π΅ΡΠΎΠΌ ΠΏΠΎΠ΄Π°Π²Π»Π΅Π½ΠΈΡ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΠΎΠΊΠ½Π°.
2.2.2. Π’ΡΠΈΠ³Π³Π΅ΡΡ ΠΏΠΎΠ΄Π°Π²Π»Π΅Π½ΠΈΡ
Π’ΡΠΈΠ³Π³Π΅Ρ ΠΏΠΎΠ΄Π°Π²Π»Π΅Π½ΠΈΡ — ΡΡΠΎ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ΄Π°Π²Π»ΡΠ΅Ρ ΡΠ΅Π³ΡΠ»ΠΈΡΠΎΠ²ΠΊΡ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ·Π»Π° ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ, Π΅ΡΠ»ΠΈ ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ ΠΎΠΊΠ½Π° ΠΏΠΎΠ΄Π°Π²Π»Π΅Π½ΠΈΡ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ.ΠΡΠΈ ΡΡΠΈΠ³Π³Π΅ΡΡ:
ΠΡΠ±ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΈΠ· ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²: Π½Π° Π»ΡΠ±ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ Π½Π° ΠΏΡΡΠΈ ΠΎΡ ΡΠ·Π»Π° ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ Π΄ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (ΠΈΠ»ΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°), Π²ΠΊΠ»ΡΡΠ°Ρ ΠΎΠ±Π°:
ΠΡΠ±ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΈ. Π½Π° Π»ΡΠ±ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ Π²Π½ΡΡΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (ΠΈΠ»ΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°), ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΡΡΠ°Π΅Ρ Π±ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΡΠΎΡ ΡΡΠΈΠ³Π³Π΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΠ²Π»ΡΠ΅ΡΡΡ Π»ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° ΠΏΡΡΠΈ ΠΎΡ ΡΠ·Π»Π° ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΊ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ°Π²Π½ΠΎ Π½ΡΠ»Ρ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. Π’ΡΠΈΠ³Π³Π΅ΡΡ ΠΏΠΎΠ΄Π°Π²Π»Π΅Π½ΠΈΡ ΡΡΡΠ΅ΡΡΠ²ΡΡΡ Π΄Π»Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΠΈ Ρ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠΌ Π²Π΅Π±-ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ, ΠΈΠΌΠ΅ΡΡΠΈΠΌ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΈΠ·-Π·Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π² ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°Ρ ΡΠΎΠ±ΡΡΠΈΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
3. ΠΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ API
ΠΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΡΠ΅ΠΆΠΈΠΌΠΎΠΌ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΡΠΈ Π·Π°ΠΏΡΡΠΊΠ΅, ΡΠ°ΠΊ ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΏΠΎΠ»ΡΡΠ°ΡΡ Π²ΡΠ³ΠΎΠ΄Ρ Π΄Π°ΠΆΠ΅ ΠΎΡ ΡΡΡΠ°ΡΠ΅Π²ΡΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°. overflow-anchor ΠΌΠΎΠΆΠ΅Ρ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ ΠΏΡΠΈΠ²ΡΠ·ΠΊΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊ ΡΠ°ΡΡΠΈ ΠΈΠ»ΠΈ Π²ΡΠ΅ΠΉ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ (ΠΎΡΠΊΠ°Π·Π°ΡΡΡΡ), ΠΈΠ»ΠΈ ΠΈΡΠΊΠ»ΡΡΠΈΡΡ ΡΠ°ΡΡΠΈ ΠΌΠΎΠ΄Π΅Π»ΠΈ DOM ΠΈΠ· Π°Π»Π³ΠΎΡΠΈΡΠΌΠ° Π²ΡΠ±ΠΎΡΠ° ΡΠ·Π»ΠΎΠ² ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
- Π°Π²ΡΠΎ
Π·Π°ΡΠ²Π»ΡΠ΅Ρ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΠΎ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠ°Π²ΠΎ ΡΡΠ°ΡΡΠ²ΠΎΠ²Π°ΡΡ Π² Π°Π»Π³ΠΎΡΠΈΡΠΌΠ΅ Π²ΡΠ±ΠΎΡΠ° ΡΠ·Π»Π° ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΏΠΎΠ»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΠΈΠ»ΠΈ ΠΏΡΠ΅Π΄ΠΊΠΎΠΌ.
- Π½Π΅Ρ
ΠΠ±ΡΡΠ²Π»ΡΠ΅Ρ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈ Π΅Π³ΠΎ ΠΏΠΎΡΠΎΠΌΠΊΠΈ (ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ Π²Π»ΠΎΠΆΠ΅Π½Ρ Π² Π΄ΡΡΠ³ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ) Π½Π΅ ΠΈΠΌΠ΅ΡΡ ΠΏΡΠ°Π²Π° ΡΡΠ°ΡΡΠ²ΠΎΠ²Π°ΡΡ Π² Π°Π»Π³ΠΎΡΠΈΡΠΌΠ΅ Π²ΡΠ±ΠΎΡΠ° ΡΠ·Π»Π° ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΏΠΎΠ»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΠΈΠ»ΠΈ ΠΏΡΠ΅Π΄ΠΊΠΎΠΌ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΠ΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠ½ΠΎΠ²Π° Π²ΠΊΠ»ΡΡΠΈΡΡ ΠΏΡΠΈΠ²ΡΠ·ΠΊΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. Π΄Π»Ρ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ² ΡΠΊΠΎΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ: Π½Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ΄Π½Π°ΠΊΠΎ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ «Π²ΠΊΠ»ΡΡΠ°ΡΡ Π΅Π³ΠΎ». (Π΄Π»Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ) Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΡΠ²Π½ΠΎ Π½Π΅ ΠΈΠΌΠ΅ΡΡ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ: Π΄Π»Ρ Π½ΠΈΡ ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π½ΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. Π’Π°ΠΊΠΆΠ΅ Π±ΡΠ»ΠΎ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ
(Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ)
Π΄Π»Ρ Π»ΠΈΠΏΠΊΠΈΡ
ΠΏΠΎΠ»ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ CSS,
ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ΅ΠΏΠ΅ΡΡ Π·Π°ΠΌΠ΅Π½Π΅Π½.
4. ΠΠΎΠΏΡΠΎΡΡ ΠΊΠΎΠ½ΡΠΈΠ΄Π΅Π½ΡΠΈΠ°Π»ΡΠ½ΠΎΡΡΠΈ ΠΈ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡΠΈ
ΠΡΠ° ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅Π³ΡΠ»ΠΈΡΡΠ΅Ρ ΡΠΎ, ΠΊΠ°ΠΊ ΠΌΡ Π²ΡΡΠΈΡΠ»ΡΠ΅ΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π½Π΅ Π²Π²ΠΎΠ΄ΠΈΡ Π½ΠΈΠΊΠ°ΠΊΠΈΡ Π½ΠΎΠ²ΡΡ ΡΠΎΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΊΠΎΠ½ΡΠΈΠ΄Π΅Π½ΡΠΈΠ°Π»ΡΠ½ΠΎΡΡΠΈ ΠΈΠ»ΠΈ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡΠΈ.
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Ρ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΎΡ 11 ΡΠ΅Π²ΡΠ°Π»Ρ 2020 Π³.
Π‘ΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠ΅
Π£ΡΠ»ΠΎΠ²Π½ΡΠ΅ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅
Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ ΠΊ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡ Π²ΡΡΠ°ΠΆΠ°ΡΡΡΡ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΠ΅ΠΉ ΠΎΠΏΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΠ²Π΅ΡΠΆΠ΄Π΅Π½ΠΈΡ ΠΈ ΡΠ΅ΡΠΌΠΈΠ½ΠΎΠ»ΠΎΠ³ΠΈΡ RFC 2119. ΠΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π° Β«ΠΠΠΠΠΠ«Β», Β«ΠΠ ΠΠΠΠΠΠΒ», Β«ΠΠΠ―ΠΠΠ’ΠΠΠ¬ΠΠΒ», Β«ΠΠΠΠΠΠΒ», Β«ΠΠ ΠΠΠΠΠΠΒ», Β«ΠΠΠΠΠΠΒ», Β«ΠΠ ΠΠΠΠΠΠΒ», Β«Π ΠΠΠΠΠΠΠΠ£ΠΠ’Π‘Π―Β», Β«ΠΠΠΠΠ’Β» ΠΈ Β«ΠΠΠΠΠΠΠΠ’ΠΠΠ¬ΠΠΒ» Π² Π½ΠΎΡΠΌΠ°ΡΠΈΠ²Π½ΡΡ ΡΠ°ΡΡΡΡ Π½Π°ΡΡΠΎΡΡΠ΅Π³ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠΈΡΠΎΠ²Π°ΡΡ, ΠΊΠ°ΠΊ ΠΎΠΏΠΈΡΠ°Π½ΠΎ Π² RFC 2119.ΠΠ΄Π½Π°ΠΊΠΎ Π΄Π»Ρ ΡΠ΄ΠΎΠ±ΡΡΠ²Π° ΡΡΠ΅Π½ΠΈΡ ΡΡΠΈ ΡΠ»ΠΎΠ²Π° Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² Π²Π΅ΡΡ Π½Π΅ΠΌ ΡΠ΅Π³ΠΈΡΡΡΠ΅. Π±ΡΠΊΠ²Ρ Π² ΡΡΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ.
ΠΠ΅ΡΡ ΡΠ΅ΠΊΡΡ Π΄Π°Π½Π½ΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½ΠΎΡΠΌΠ°ΡΠΈΠ²Π½ΡΠΌ, ΠΊΡΠΎΠΌΠ΅ ΡΠ°Π·Π΄Π΅Π»ΠΎΠ². ΡΠ²Π½ΠΎ ΠΏΠΎΠΌΠ΅ΡΠ΅Π½Ρ ΠΊΠ°ΠΊ Π½Π΅Π½ΠΎΡΠΌΠ°ΡΠΈΠ²Π½ΡΠ΅, ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΡ. [RFC2119]
ΠΡΠΈΠΌΠ΅ΡΡ Π² ΡΡΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ Β«Π½Π°ΠΏΡΠΈΠΌΠ΅ΡΒ»
ΠΈΠ»ΠΈ Π²ΡΠ΄Π΅Π»ΡΡΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ ΠΎΡ Π½ΠΎΡΠΌΠ°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ class = "example"
,
ΠΊΠ°ΠΊ ΡΡΠΎ:
ΠΡΠΎ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ²Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ Π·Π°ΠΌΠ΅ΡΠΊΠΈ Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ ΡΠΎ ΡΠ»ΠΎΠ²Π° Β«ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅Β» ΠΈ Π²ΡΠ΄Π΅Π»ΡΡΡΡΡ
Π½ΠΎΡΠΌΠ°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Ρ class = "note"
, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ²Π½ΠΎΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅.
Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ — ΡΡΠΎ Π½ΠΎΡΠΌΠ°ΡΠΈΠ²Π½ΡΠ΅ ΡΠ°Π·Π΄Π΅Π»Ρ, ΠΏΡΠΈΠ·Π²Π°Π½Π½ΡΠ΅ ΠΏΡΠΈΠ²Π»Π΅ΡΡ ΠΎΡΠΎΠ±ΠΎΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅.
ΠΎΡΠ΄Π΅Π»ΠΈΡΡ ΠΎΡ Π΄ΡΡΠ³ΠΎΠ³ΠΎ Π½ΠΎΡΠΌΠ°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° ΠΊΠΎΠ΄ΠΎΠΌ
, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ
ΡΡΠΎ: UA ΠΠΠΠΠΠ« ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ.
ΠΠ»Π°ΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡ
Π‘ΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠ΅ Π΄Π°Π½Π½ΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΡΠ΅Ρ ΠΊΠ»Π°ΡΡΠΎΠ² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡ:
- ΡΠ°Π±Π»ΠΈΡΠ° ΡΡΠΈΠ»Π΅ΠΉ
- Π CSS ΡΠ°Π±Π»ΠΈΡΠ° ΡΡΠΈΠ»Π΅ΠΉ.
- ΡΠ΅Π½Π΄Π΅ΡΠ΅Ρ
- UA, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠΈΡΡΠ΅Ρ ΡΠ΅ΠΌΠ°Π½ΡΠΈΠΊΡ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ
Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡ
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ.
- ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ
- UA, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΈΡΠ΅Ρ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ.
Π’Π°Π±Π»ΠΈΡΠ° ΡΡΠΈΠ»Π΅ΠΉ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΡΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ Π΅ΡΠ»ΠΈ Π²ΡΠ΅ Π΅Π³ΠΎ ΡΡΠ²Π΅ΡΠΆΠ΄Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ Π² ΡΡΠΎΠΌ ΠΌΠΎΠ΄ΡΠ»Π΅, Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½Ρ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΎΠ±ΡΠ΅ΠΉ Π³ΡΠ°ΠΌΠΌΠ°ΡΠΈΠΊΠΎΠΉ CSS ΠΈ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΌΠΈ Π³ΡΠ°ΠΌΠΌΠ°ΡΠΈΠΊΠ°ΠΌΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΡΠ½ΠΊΡΠΈΡ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½Π°Ρ Π² ΡΡΠΎΠΌ ΠΌΠΎΠ΄ΡΠ»Π΅.
Π‘ΡΠ΅Π΄ΡΡΠ²ΠΎ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΡΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ Π΅ΡΠ»ΠΈ Π² Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠ°ΡΠΈΠΈ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ, ΠΊΠ°ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ, ΠΎΠ½ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π²ΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΏΠΎ ΡΡΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ, ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΏΡΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π² ΠΈΡ ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΎΡΡΠΈΡΠΎΠ²ΡΠ²Π°Π΅ΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ.ΠΠ΄Π½Π°ΠΊΠΎ Π½Π΅ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡΡ UA Π΄Π»Ρ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎΠΉ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈΠ·-Π·Π° ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠΉ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π½Π΅ Π΄Π΅Π»Π°Π΅Ρ UA Π½Π΅ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ. (ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, UA Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ° Π½Π° ΠΌΠΎΠ½ΠΎΡ ΡΠΎΠΌΠ½ΠΎΠΌ ΠΌΠΎΠ½ΠΈΡΠΎΡΠ΅.)
ΠΠ½ΡΡΡΡΠΌΠ΅Π½Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΡΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ Π΅ΡΠ»ΠΈ ΠΎΠ½ ΠΏΠΈΡΠ΅Ρ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΎΠ±ΡΠ°Ρ Π³ΡΠ°ΠΌΠΌΠ°ΡΠΈΠΊΠ° CSS ΠΈ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ Π³ΡΠ°ΠΌΠΌΠ°ΡΠΈΠΊΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ Π² ΡΡΠΎΡ ΠΌΠΎΠ΄ΡΠ»Ρ ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ Π²ΡΠ΅ΠΌ ΠΎΡΡΠ°Π»ΡΠ½ΡΠΌ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡΠΌ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡ ΡΠ°Π±Π»ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΊΠ°ΠΊ ΠΎΠΏΠΈΡΠ°Π½ΠΎ Π² ΡΡΠΎΠΌ ΠΌΠΎΠ΄ΡΠ»Π΅.
Π§Π°ΡΡΠΈΡΠ½ΠΎΠ΅ Π²Π½Π΅Π΄ΡΠ΅Π½ΠΈΠ΅
Π§ΡΠΎΠ±Ρ Π°Π²ΡΠΎΡΡ ΠΌΠΎΠ³Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π° ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ Π°Π½Π°Π»ΠΈΠ·Π° Ρ ΠΏΡΡΠΌΠΎΠΉ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡΡ Π΄Π»Ρ
Π½Π°Π·Π½Π°ΡΠ°ΡΡ ΡΠ΅Π·Π΅ΡΠ²Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΡΠ΅Π΄ΡΡΠ²Π° Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ CSS Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΠΊΠ°ΠΊ Π½Π΅Π΄ΠΎΠΏΡΡΡΠΈΠΌΡΠ΅ (ΠΈ ΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°ΡΡ
ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ) Π»ΡΠ±ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π°, ΡΠ²ΠΎΠΉΡΡΠ²Π°, Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ², ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π°,
ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΠΈ, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΡΡ
Ρ Π½ΠΈΡ
Π½Π΅Ρ ΠΏΡΠΈΠ³ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ
ΡΠ»ΡΠΆΠ±Π° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ. Π ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ Π°Π³Π΅Π½ΡΡ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΡΠ±ΠΎΡΠΎΡΠ½ΠΎ
ΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°ΡΡ Π½Π΅ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΈ ΡΠΎΠ±Π»ΡΠ΄Π°ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π² ΠΎΠ΄Π½ΠΎΠΌ
ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΠ·Π½Π°ΡΠ½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°: Π΅ΡΠ»ΠΈ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΠΈΡΠ°Π΅ΡΡΡ Π½Π΅Π΄ΠΎΠΏΡΡΡΠΈΠΌΡΠΌ
(ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π½Π΅ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ), CSS ΡΡΠ΅Π±ΡΠ΅Ρ, ΡΡΠΎΠ±Ρ Π²ΡΠ΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅
ΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°ΡΡ.
Π Π΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π½Π΅ΡΡΠ°Π±ΠΈΠ»ΡΠ½ΡΡ ΠΈ ΠΏΡΠΎΠΏΡΠΈΠ΅ΡΠ°ΡΠ½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ
Π§ΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΊΠΎΠ½ΡΠ»ΠΈΠΊΡΠΎΠ² Ρ Π±ΡΠ΄ΡΡΠΈΠΌΠΈ ΡΡΠ°Π±ΠΈΠ»ΡΠ½ΡΠΌΠΈ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ CSS, CSSWG ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅Ρ ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ ΠΏΠ΅ΡΠ΅Π΄ΠΎΠ²ΡΠΌ ΠΌΠ΅ΡΠΎΠ΄Π°ΠΌ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π½Π΅ΡΡΠ°Π±ΠΈΠ»ΡΠ½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ ΠΈ ΠΏΡΠΎΠΏΡΠΈΠ΅ΡΠ°ΡΠ½ΡΡ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠΉ CSS.
ΠΠ΅ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ
ΠΠΎΠ³Π΄Π° ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ Π΄ΠΎΡΡΠΈΠ³Π°Π΅Ρ ΡΡΠ°Π΄ΠΈΠΈ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ ΠΊΠ°Π½Π΄ΠΈΠ΄Π°ΡΠ°, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ Π½Π΅ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ, ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΡΠΏΡΡΡΠΈΡΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ Π±Π΅Π· ΠΏΡΠ΅ΡΠΈΠΊΡΠ° Π»ΡΠ±ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ ΡΡΠΎΠ²Π½Ρ CR, ΠΊΠΎΡΠΎΡΡΡ ΠΎΠ½ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ ΡΠΎ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠ΅ΠΉ.
ΠΠ»Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠ°Π½ΠΈΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ CSS ΡΠ΅ΡΠ΅Π· ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡΡ , ΡΠ°Π±ΠΎΡΠ°Ρ Π³ΡΡΠΏΠΏΠ° CSS ΠΏΡΠΎΡΠΈΡ, ΡΡΠΎΠ±Ρ Π½Π΅ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠ΅ Π‘ΡΠ΅Π΄ΡΡΠ²Π° Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ CSS ΠΎΡΠΏΡΠ°Π²Π»ΡΡΡ ΠΎΡΡΠ΅Ρ ΠΎ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ (ΠΈ, ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ, ΡΠ΅ΡΡΠΎΠ²ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΎΡΡΠ΅ΡΠ° ΠΎ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ) Π² W3C ΠΏΠ΅ΡΠ΅Π΄ Π²ΡΠΏΡΡΠΊ Π±Π΅Π· ΠΏΡΠ΅ΡΠΈΠΊΡΠ° ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ ΡΡΠ½ΠΊΡΠΈΠΉ CSS. Π’Π΅ΡΡΠΎΠ²ΡΠ΅ Π½Π°Π±ΠΎΡΡ ΠΎΡΠΏΡΠ°Π²Π»Π΅Π½Π½ΡΠ΅ Π² W3C ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΡΠΎΠ²Π΅ΡΠ΅Π½Ρ ΠΈ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½Ρ CSS. Π Π°Π±ΠΎΡΠ°Ρ Π³ΡΡΠΏΠΏΠ°.
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎΠ± ΠΎΡΠΏΡΠ°Π²ΠΊΠ΅ ΡΠ΅ΡΡΠΎΠ²ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΈ ΠΎΡΡΠ΅ΡΠΎΠ² ΠΎ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ Π Π°Π±ΠΎΡΠ΅ΠΉ Π³ΡΡΠΏΠΏΡ CSS ΠΏΠΎ Π°Π΄ΡΠ΅ΡΡ https: // www.w3.org/Style/CSS/Test/. ΠΠΎΠΏΡΠΎΡΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π½Π°ΠΏΡΠ°Π²Π»ΡΡΡ Π² ΡΠΏΠΈΡΠΎΠΊ ΡΠ°ΡΡΡΠ»ΠΊΠΈ [email protected].
ΠΠ½Π΄Π΅ΠΊΡ
Π’Π΅ΡΠΌΠΈΠ½Ρ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ Π² Π΄Π°Π½Π½ΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ
- Π°Π½ΠΊΠ΅ΡΠ½ΡΠΉ ΡΠ·Π΅Π», Π² Β§2
- Π°Π»Π³ΠΎΡΠΈΡΠΌ Π²ΡΠ±ΠΎΡΠ° ΡΠ·Π»Π° ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ, Π² Β§2.1
- Π°Π²ΡΠΎ, Π² Β§3
- Π°Π»Π³ΠΎΡΠΈΡΠΌ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ ΠΊΠ°Π½Π΄ΠΈΠ΄Π°ΡΠΎΠ², Π² Β§2.1
- ΠΈΡΠΊΠ»ΡΡΠ΅Π½Π½ΠΎΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠ΅Π²ΠΎ, Π² Β§2.1
- ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΎΠ±ΡΠ΅Π·Π°Π½ΠΎ, Π² Β§2.1
- ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π²ΠΈΠ΄Π½ΠΎ, Π² Β§2.1
- Π½Π΅Ρ, Π² Β§3
- ΡΠΊΠΎΡΡ ΠΏΠ΅ΡΠ΅Π»ΠΈΠ²Π°, Π² Β§ 3
- ΡΠ°ΡΡΠΈΡΠ½ΠΎ Π²ΠΈΠ΄Π½ΠΎ, Π² Β§2.1
- ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠ½ΡΡ ΠΊΠ°Π½Π΄ΠΈΠ΄Π°ΡΠΎΠ², Π² Β§2.1
- ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°ΡΡΠΈΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π² Β§2.1
- ΡΡΠΈΠ³Π³Π΅Ρ ΠΏΠΎΠ΄Π°Π²Π»Π΅Π½ΠΈΡ, Π² Β§2.2.2
- ΠΎΠΊΠ½ΠΎ ΠΏΠΎΠ΄Π°Π²Π»Π΅Π½ΠΈΡ, Π² Β§2.2.1
- ΠΆΠΈΠ·Π½Π΅ΡΠΏΠΎΡΠΎΠ±Π½ΡΠΉ ΠΊΠ°Π½Π΄ΠΈΠ΄Π°Ρ, Π² Β§2.
1


Π’Π΅ΡΠΌΠΈΠ½Ρ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΎΠΉ
- [css-box-4] ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ΅ΡΠΌΠΈΠ½Ρ:
- ΠΎΠ±Π»Π°ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ
- ΠΌΠ°ΡΠΆΠ°
- Π½Π°Π±ΠΈΠ²ΠΊΠ°
- [css-display-3] ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ΅ΡΠΌΠΈΠ½Ρ:
- Π°ΡΠΎΠΌΠ°ΡΠ½ΡΠΉ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ
- ΡΡΠΈΠΊ
- ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ
- Π΄ΠΈΡΠΏΠ»Π΅ΠΉ
- Π½Π΅Ρ
- [css-overflow-3] ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ΅ΡΠΌΠΈΠ½Ρ:
- ΡΠΏΠΈΡΠ°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ
- ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ
- [css-position-3] ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ΅ΡΠΌΠΈΠ½Ρ:
- Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅
- Π½ΠΈΠ·
- ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΎ
- ΠΎΡΡΠ°Π»ΠΎΡΡ
- ΠΏΠΎΠ·ΠΈΡΠΈΡ
- ΠΏΡΠ°Π²ΡΠΉ
- Π²Π΅ΡΡ
- [CSS-SCROLL-SNAP-1] ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ΅ΡΠΌΠΈΠ½Ρ:
- ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡΡ ΠΎΠ±Π·ΠΎΡΠ°
- ΠΏΡΠΎΠΊΡΡΡΠΊΠ°-ΠΎΡΡΡΡΠΏ
- [css-sizing-3] ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ΅ΡΠΌΠΈΠ½Ρ:
- Π²ΡΡΠΎΡΠ°
- ΠΌΠ°ΠΊΡ-Π²ΡΡΠΎΡΠ°
- ΠΌΠ°ΠΊΡ. Π¨ΠΈΡΠΈΠ½Π°
- ΠΌΠΈΠ½-Π²ΡΡΠΎΡΠ°
- ΠΌΠΈΠ½. Π¨ΠΈΡΠΈΠ½Π°
- ΡΠΈΡΠΈΠ½Π°
- [css-transforms-1] ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ΅ΡΠΌΠΈΠ½Ρ:
- [css-values-4] ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ΅ΡΠΌΠΈΠ½Ρ:
- [css-writing-Mode-4] ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ΅ΡΠΌΠΈΠ½Ρ:
- [CSSOM-VIEW] ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ΅ΡΠΌΠΈΠ½Ρ:
- getBoundingClientRect ()
- ΡΠ²ΠΈΡΠΎΠΊ
- ΠΏΠΎΠ»Π΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
- [DOM] ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ΅ΡΠΌΠΈΠ½Ρ:
- [HTML] ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ΅ΡΠΌΠΈΠ½Ρ:
- dom Π°Π½ΠΊΠ΅Ρ
- ΠΎΠ±Π»Π°ΡΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° Π² ΡΠΎΠΊΡΡΠ΅
Π‘ΠΏΠΈΡΠΎΠΊ Π»ΠΈΡΠ΅ΡΠ°ΡΡΡΡ
ΠΠΎΡΠΌΠ°ΡΠΈΠ²Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ
- [CSS-BOX-4]
- ΠΠ»ΠΈΠΊΠ° ΠΡΠ΅ΠΌΠ°Π΄.ΠΠΎΠ΄ΡΠ»Ρ Π±Π»ΠΎΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ CSS, ΡΡΠΎΠ²Π΅Π½Ρ 4. 21 Π°ΠΏΡΠ΅Π»Ρ 2020 Π³. WD. URL: https://www.w3.org/TR/css-box-4/
- [CSS-DISPLAY-3]
- Tab Atkins Jr .; ΠΠ»ΠΈΠΊΠ° ΠΡΠ΅ΠΌΠ°Π΄. ΠΠΎΠ΄ΡΠ»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ CSS, ΡΡΠΎΠ²Π΅Π½Ρ 3. 19 ΠΌΠ°Ρ 2020 Π³. CR. URL: https://www.w3.org/TR/css-display-3/
- [CSS-OVERFLOW-3]
- ΠΡΠ²ΠΈΠ΄ ΠΠ°ΡΠΎΠ½; ΠΠ»ΠΈΠΊΠ° ΠΡΠ΅ΠΌΠ°Π΄; Π€Π»ΠΎΡΠΈΠ°Π½ Π ΠΈΠ²ΠΎΠ°Π»Ρ. CSS Overflow Module, ΡΡΠΎΠ²Π΅Π½Ρ 3. 3 ΠΈΡΠ½Ρ 2020 Π³. WD. URL: https://www.w3.org/TR/css-overflow-3/
- [CSS-POSITION-3]
- ΠΠ»ΠΈΠΊΠ° ΠΡΠ΅ΠΌΠ°Π΄; ΠΈ Π΄ΡΡΠ³ΠΈΠ΅.ΠΠΎΠ΄ΡΠ»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ CSS, ΡΡΠΎΠ²Π΅Π½Ρ 3. 19 ΠΌΠ°Ρ 2020 Π³. WD. URL: https://www.w3.org/TR/css-position-3/
- [CSS-SCROLL-SNAP-1]
- ΠΡΡΡ Π Π°ΠΊΠΎΠ²; ΠΈ Π΄ΡΡΠ³ΠΈΠ΅. CSS Scroll Snap Module, ΡΡΠΎΠ²Π΅Π½Ρ 1. 19 ΠΌΠ°ΡΡΠ° 2019 Π³. CR. URL: https://www.w3.org/TR/css-scroll-snap-1/
- [CSS-SIZING-3]
- Tab Atkins Jr .; ΠΠ»ΠΈΠΊΠ° ΠΡΠ΅ΠΌΠ°Π΄. CSS Box Sizing Module Level 3. 23 ΠΎΠΊΡΡΠ±ΡΡ 2020 Π³. WD. URL: https://www.w3.org/TR/css-sizing-3/
- [CSS-TRANSFORMS-1]
- Π‘Π°ΠΉΠΌΠΎΠ½ Π€ΡΠ΅ΠΉΠ·Π΅Ρ; ΠΈ Π΄ΡΡΠ³ΠΈΠ΅.CSS Transforms Module Level 1. 14 ΡΠ΅Π²ΡΠ°Π»Ρ 2019 Π³. CR. URL: https://www.w3.org/TR/css-transforms-1/
- [CSS-VALUES-3]
- Tab Atkins Jr .; ΠΠ»ΠΈΠΊΠ° ΠΡΠ΅ΠΌΠ°Π΄. ΠΠΎΠ΄ΡΠ»Ρ Β«ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΠΈ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ CSSΒ», ΡΡΠΎΠ²Π΅Π½Ρ 3. 6 ΠΈΡΠ½Ρ 2019 Π³. CR. URL: https://www.w3.org/TR/css-values-3/
- [CSS-VALUES-4]
- Tab Atkins Jr .; ΠΠ»ΠΈΠΊΠ° ΠΡΠ΅ΠΌΠ°Π΄. ΠΠΎΠ΄ΡΠ»Ρ Β«ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΠΈ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ CSSΒ», ΡΡΠΎΠ²Π΅Π½Ρ 4. 31 ΡΠ½Π²Π°ΡΡ 2019 Π³. WD. URL: https://www.w3.org/TR/css-values-4/
- [CSS-WRITING-MODES-4]
- ΠΠ»ΠΈΠΊΠ° ΠΡΠ΅ΠΌΠ°Π΄; ΠΠΎΠ΄ΠΆΠΈ ΠΡΠΈΠΈ.Π Π΅ΠΆΠΈΠΌΡ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ CSS, ΡΡΠΎΠ²Π΅Π½Ρ 4. 30 ΠΈΡΠ»Ρ 2019 Π³. CR. URL: https://www.w3.org/TR/css-writing-modes-4/
- [CSS2]
- ΠΠ΅ΡΡ ΠΠΎΡ; ΠΈ Π΄ΡΡΠ³ΠΈΠ΅. Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΡ ΡΠ°Π±Π»ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ, ΡΡΠΎΠ²Π΅Π½Ρ 2, ΡΠ΅Π΄Π°ΠΊΡΠΈΡ 1 (CSS 2.1). 7 ΠΈΡΠ½Ρ 2011. Π ΠΠ¦. URL: https://www.w3.org/TR/CSS21/
- [CSSOM-VIEW]
- Π‘Π°ΠΉΠΌΠΎΠ½ ΠΠΈΡΠ΅ΡΡ. ΠΠΎΠ΄ΡΠ»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° CSSOM. 17 ΠΌΠ°ΡΡΠ° 2016 Π³. WD. URL: https://www.w3.org/TR/cssom-view-1/
- [DOM]
- ΠΠ½Π½ Π²Π°Π½ ΠΠ΅ΡΡΠ΅ΡΠ΅Π½. DOM Standard. Π£ΡΠΎΠ²Π΅Π½Ρ ΠΆΠΈΠ·Π½ΠΈ.URL: https://dom.spec.whatwg.org/
- [HTML]
- ΠΠ½Π½ Π²Π°Π½ ΠΠ΅ΡΡΠ΅ΡΠ΅Π½; ΠΈ Π΄ΡΡΠ³ΠΈΠ΅. Π‘ΡΠ°Π½Π΄Π°ΡΡ HTML. Π£ΡΠΎΠ²Π΅Π½Ρ ΠΆΠΈΠ·Π½ΠΈ. URL: https://html.spec.whatwg.org/multipage/
- [RFC2119]
- Π‘. ΠΡΠ°Π΄Π½Π΅Ρ. ΠΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π° Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² RFC Π΄Π»Ρ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΡΠΎΠ²Π½Π΅ΠΉ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ. ΠΠ°ΡΡ 1997 Π³. ΠΠ°ΠΈΠ»ΡΡΡΠ°Ρ ΡΠ΅ΠΊΡΡΠ°Ρ ΠΏΡΠ°ΠΊΡΠΈΠΊΠ°. URL: https://tools.ietf.org/html/rfc2119
ΠΠ½Π΄Π΅ΠΊΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΡΡΠΈ
ΠΠΌΡ | Π‘ΡΠΎΠΈΠΌΠΎΡΡΡ | ΠΠ°ΡΠ°Π»ΡΠ½ΡΠΉ | ΠΡΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ ΠΊ | Π΄ΡΠΉΠΌ. | % Π²ΠΎΠ·ΡΠ°ΡΡΠΎΠ² | Π’ΠΈΠΏ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ | ΠΠ°Π½ΠΎΠ½ΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΏΠΎΡΡΠ΄ΠΎΠΊ | Π Π°ΡΡΠ΅ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ |
---|---|---|---|---|---|---|---|---|
Π°Π½ΠΊΠ΅Ρ ΠΏΠ΅ΡΠ΅Π»ΠΈΠ²Π° | Π°Π²ΡΠΎ | Π½ΠΈΠΊΡΠΎ | Π°Π²ΡΠΎ | Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ | Π½Π΅Ρ | Π½ / Π΄ | Π΄ΠΈΡΠΊΡΠ΅ΡΠ½ΡΠΉ | Π·Π° Π³ΡΠ°ΠΌΠΌΠ°ΡΠΈΠΊΡ | ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ |