Π Π°Π·Π½ΠΎΠ΅

Π‘ΠΊΡ€ΠΎΠ»Π»ΠΈΠ½Π³ css: ΠŸΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° CSS β€” ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

07.06.2021

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

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 {

Β Β Β  background: #f1f1f1;
}

/* 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 Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Scroll

Scrollify — ΡƒΡΠΊΠΎΡ€ΠΈΡ‚Π΅Π»ΡŒ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ колёсика ΠΌΡ‹ΡˆΠΈ

Scrollify — ΡƒΡΠΊΠΎΡ€ΠΈΡ‚Π΅Π»ΡŒ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ колёсика ΠΌΡ‹ΡˆΠΈ. jQuery ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ быстро ΠΈ ΠΏΠ»Π°Π²Π½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒΡΡ ΠΊ Π½ΡƒΠΆΠ½ΠΎΠΌΡƒ Ρ€Π°Π·Π΄Π΅Π»Ρƒ ΠΈΠ»ΠΈ сСкции страницы. НастраиваСмый ΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ для touch устройств.

14 134 Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Scroll

Nicescroll — Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π° полос ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ

Плагин nicescroll позволяСт ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ стандартным полосам ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΡΡ‚ΠΈΠ»ΡŒ внСшнС ΠΏΠΎΡ…ΠΎΠΆΠΈΠΉ Π½Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ Π² ios (ΠΊΠ°ΠΊ Ρƒ apple). ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ, Ρ‚Π°ΠΊ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ. ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² DIV-Π°Ρ…, Iframe-Π°Ρ…, textarea ΠΈ body.

3 399 Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Scroll

Автопрокрутка Π²Π²Π΅Ρ€Ρ… страницы

Π‘Ρ‚Ρ€Π΅Π»ΠΎΡ‡ΠΊΠ° ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π΄ΠΎ Π²Π΅Ρ€Ρ…Π° страницы Π½Π° jQuery.

4 470 Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Scroll

Анимированная ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° Π²Π²Π΅Ρ€Ρ…

ΠŸΡ€ΠΎΡΡ‚Π°Ρ рСализация Π½Π° jQuery Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π²Π²Π΅Ρ€Ρ… страницы. Код провСряСт ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ скроллбара, Ссли Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π²Ρ‹ΡˆΠ΅ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ, Ρ‚ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ скрываСтся, ΠΈΠ½Π°Ρ‡Π΅ появляСтся ΠΊΠ½ΠΎΠΏΠΊΠ°, ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ происходит ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° страницы Π² самый Π²Π΅Ρ€Ρ….

5 164 Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Scroll

Быстрая ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° Π²Π²Π΅Ρ€Ρ… ΠΈ Π²Π½ΠΈΠ·

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π΄Π²ΡƒΡ… ΠΊΠ½ΠΎΠΏΠΎΡ‡Π΅ΠΊ Π½Π° ваш сайт для быстрой ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² Π½Π°Ρ‡Π°Π»ΠΎ ΠΈΠ»ΠΈ Π² ΠΊΠΎΠ½Π΅Ρ† страницы. Кнопки зафиксированы Π² Π»Π΅Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡƒΠ³Π»Ρƒ. Когда Π²Ρ‹ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅Ρ‚Π΅ страницу, Ρ‚ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ становятся ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌΠΈ — Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΊΠ°ΠΊ Π±Ρ‹ Π½Π΅ ΠΎΠ±Ρ€Π°Ρ‰Π°ΡŽΡ‚ Π½Π° сСбя Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅. Когда страничка Π½Π΅ ΠΏΠΎΠ΄Π²ΠΈΠΆΠ½Π°, Ρ‚ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π²ΠΈΠ΄Π½Ρ‹.

3 139 Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / 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;
}

Π‘ΠΎΠ³Π»Π°ΡΠΈΡ‚Π΅ΡΡŒ, Ρ‚Π°ΠΊ страничка выглядит Π»ΡƒΡ‡ΡˆΠ΅.

Бпособы примСнСния

В качСствС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΌΡ‹Β ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π»ΠΈ пустыС Π±Π»ΠΎΠΊΠΈ, Π½ΠΎΒ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ этот ΠΏΡ€ΠΈΡ‘ΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΒ ΠΌΠ½ΠΎΠ³ΠΈΡ… прилоТСниях. Π’ΠΎΡ‚ ΠΏΠ°Ρ€Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ²:

  1. Π’Π°ΡˆΠ° собствСнная вСрсия Instagram:

  2. ΠŸΡ€ΠΎΡΡ‚Π°Ρ доска для Π·Π°ΠΌΠ΅Ρ‚ΠΎΠΊ:

ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΡΡ‚Π°Ρ‚ΡŒΠΈ Β«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. 0 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 НСт
ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ /
Android Chrome Android Firefox Android iOS Safari 89 86 89 НСт

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ информация

Π₯ΠΎΡ€ΠΎΡˆΠΎ управляСмая ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ 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. scrollTo , Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ вычислит ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌΡƒΡŽ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΈ, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π°Ρ Π»ΠΎΠ³ΠΈΠΊΠ° привязки, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΉΡ‚ΠΈ ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ мСсто привязки.Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π΅ΡΡ‚ΡŒ Π½Π΅Ρ‚ нСобходимости, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ сцСнарий выполнял ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ Ρ€ΡƒΡ‡Π½Ρ‹Π΅ вычислСния для привязки.

Плавная ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ°

Плавная ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° управляСт ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΏΡ€ΠΈ привязка ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ опрСдСляСт Π΅Π³ΠΎ мСсто назначСния. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΈ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΡƒΡŽΡ‚ ΠΎΡ€Ρ‚ΠΎΠ³ΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ аспСкты прокручивая, ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ вмСстС ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π°.

ПовСдСниС ΠΏΡ€ΠΈ ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ΅Π½ΠΈΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ

API повСдСния Overscroll ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΡƒΠ΅Ρ‚, ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° привязана ΠΊ нСскольким элСмСнтам, ΠΈ Π½Π° Π½Π΅Π΅ Π½Π΅ влияСт ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° Ρ‰Π΅Π»Ρ‡ΠΎΠΊ.

ΠŸΡ€Π΅Π΄ΠΎΡΡ‚Π΅Ρ€Π΅ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΏΠ΅Ρ€Π΅Π΄ΠΎΠ²ΠΎΠΉ ΠΎΠΏΡ‹Ρ‚

Π˜Π·Π±Π΅Π³Π°ΠΉΡ‚Π΅ использования ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ привязки, ΠΊΠΎΠ³Π΄Π° Ρ†Π΅Π»Π΅Π²Ρ‹Π΅ элСмСнты ΡˆΠΈΡ€ΠΎΠΊΠΎ разнСсСны. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ привСсти ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ содСрТимоС ΠΌΠ΅ΠΆΠ΄Ρƒ позициями привязки станСт нСдоступным.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ CSS.supports для опрСдСлСния Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ CSS Scroll Snap. Но ΠΈΠ·Π±Π΅Π³Π°ΠΉΡ‚Π΅ использования с Π·Π°Ρ‰Π΅Π»ΠΊΠΎΠΉ Ρ‚ΠΈΠΏΠ° , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ‚Π°ΠΊΠΆΠ΅ присутствуСт Π² ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠ΅ΠΉ спСцификации ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π΅Π½Π°Π΄Π΅ΠΆΠ½Ρ‹ΠΌ.

  if (CSS.supports ('scroll-snap-align: start')) {
  // ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ css scroll snap
} Π΅Ρ‰Π΅ {
  // ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ запасной Π²Π°Ρ€ΠΈΠ°Π½Ρ‚
}
  

НС ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°ΠΉΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ API, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Element.scrollTo всСгда Π·Π°ΠΊΠ°Π½Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ с Π·Π°ΠΏΡ€ΠΎΡˆΠ΅Π½Π½Ρ‹ΠΌ смСщСниСм ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ. ΠŸΡ€ΠΈΠ²ΡΠ·ΠΊΠ° ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π΅Π³ΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ смСщСниС ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ послС Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ это Π½Π΅ Π±Ρ‹Π»ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π΅ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΄Π°ΠΆΠ΅ Π΄ΠΎ привязки ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° ΠΌΠΎΠ³Π»Π° Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€Π΅Ρ€Π²Π°Π½ΠΎ ΠΏΠΎ Π΄Ρ€ΡƒΠ³ΠΈΠΌ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°ΠΌ, Π½ΠΎ особСнно Π² случаС ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Ρ‰Π΅Π»Ρ‡ΠΎΠΊ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π•ΡΡ‚ΡŒ прСдстоящСС ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ измСнСнию Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… API ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ для Π²ΠΎΠ·Π²Ρ€Π°Ρ‚Π° обСщания. Π­Ρ‚ΠΎ ΠΎΠ±Π΅Ρ‰Π°Π½ΠΈΠ΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ°Π΅Ρ‚ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ Π°Π³Π΅Π½Ρ‚ Π»ΠΈΠ±ΠΎ Π·Π°Π²Π΅Ρ€ΡˆΠ°Π΅Ρ‚, Π»ΠΈΠ±ΠΎ ΠΏΡ€Π΅Ρ€Ρ‹Π²Π°Π΅Ρ‚ это ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ°.ПослС стандартизации ΠΈ внСдрСния ΠΎΠ½ обСспСчиваСт эргономичный ΠΈ эффСктивный способ отслСТивания ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, ΠΈΠ½ΠΈΡ†ΠΈΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΌ скриптом с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ дСйствиями.

Π‘ΡƒΠ΄ΡƒΡ‰ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‚Ρ‹

Chrome 69 содСрТит основныС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ Π² CSS Scroll Snap. ВСхничСскиС характСристики. ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ упущСния — привязка для ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ ΠΈ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π°Ρ€Π½Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π° Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ Π½ΠΈΠΊΠ°ΠΊΠΈΠΌΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ. Π‘ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ Chrome Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠ»ΡƒΡ‡ΡˆΠ°Ρ‚ΡŒ эту Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, удСляя особоС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΎΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ функциям, ΡƒΠ»ΡƒΡ‡ΡˆΠ°Ρ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ Π²Ρ‹Π±ΠΎΡ€Π° ΠΌΠΎΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ снимка, ΠΏΠ»Π°Π²Π½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ возмоТности devtools.

12 CSS Scroll Effects

ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π½Π½Ρ‹Ρ… Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ бСсплатных HTML ΠΈ CSS-эффСктов ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΊΠΎΠ΄Π°. ОбновлСниС ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ Π·Π° ΠΌΠ°Ρ€Ρ‚ 2019 Π³ΠΎΠ΄Π°. 5 Π½ΠΎΠ²ΠΈΠ½ΠΎΠΊ.

  1. CSS Parallax Effects
  2. ΠŸΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ 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. 1.1 ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ
  2. 2 ОписаниС
    1. 2.1 Π’Ρ‹Π±ΠΎΡ€ ΡƒΠ·Π»Π° привязки
    2. 2.2 Π Π΅Π³ΡƒΠ»ΠΈΡ€ΠΎΠ²ΠΊΠ° ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ
      1. 2.2.1 Окно подавлСния
      2. 2.2.2 Π’Ρ€ΠΈΠ³Π³Π΅Ρ€Ρ‹ подавлСния
  3. 3 Π˜ΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ API
  4. 4 Вопросы ΠΊΠΎΠ½Ρ„ΠΈΠ΄Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈ бСзопасности
  5. ИзмСнСния
    1. ИзмСнСния с Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΎΡ‚ 11 фСвраля 2020 Π³.
  6. БоотвСтствиС
    1. УсловныС обозначСния Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅
    2. ΠšΠ»Π°ΡΡΡ‹ соотвСтствия
    3. ЧастичныС Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ
      1. Π Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π½Π΅ΡΡ‚Π°Π±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΈ ΠΏΡ€ΠΎΠΏΡ€ΠΈΠ΅Ρ‚Π°Ρ€Π½Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ
    4. ΠΠ΅ΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ
  7. ИндСкс
    1. Π’Π΅Ρ€ΠΌΠΈΠ½Ρ‹, ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ Π² Π΄Π°Π½Π½ΠΎΠΉ спСцификации
    2. Π’Π΅Ρ€ΠΌΠΈΠ½Ρ‹, ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ ссылкой
  8. Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ
    1. НормативныС ссылки
  9. ИндСкс собствСнности

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 , Ссли ΠΎΠ½ соотвСтствуСт всСм ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΊΡ€ΠΈΡ‚Π΅Ρ€ΠΈΠΈ:

НСкоторыС элСмСнты ΡΡ‡ΠΈΡ‚Π°ΡŽΡ‚ΡΡ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚Π½Ρ‹ΠΌΠΈ ΠΊΠ°Π½Π΄ΠΈΠ΄Π°Ρ‚Π°ΠΌΠΈ для Π²Ρ‹Π±ΠΎΡ€Π° привязки:

  1. Π―ΠΊΠΎΡ€ΡŒ DOM Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ области Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.

  2. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚, содСрТащий Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π΅ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ΅ совпадСниС Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ поиска Π½Π° страницС Π°Π³Π΅Π½Ρ‚Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. Если совпадСниС ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ нСсколько элСмСнтов, Ρ‚ΠΎ рассмотрим Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Ρ‚Π°ΠΊΠΎΠΉ элСмСнт.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Ссли ΠΊΠ°Π½Π΄ΠΈΠ΄Π°Ρ‚ с ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚ΠΎΠΌ являСтся Π½Π΅Π°Ρ‚ΠΎΠΌΠ°Ρ€Π½Ρ‹ΠΌ встроСнным элСмСнтом, Ρ‚ΠΎ вмСсто этого рассмотритС Π΅Π³ΠΎ блиТайший элСмСнт-ΠΏΡ€Π΅Π΄ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ являСтся Π½Π΅Π°Ρ‚ΠΎΠΌΠ°Ρ€Π½Ρ‹ΠΉ встроСнный элСмСнт Π² качСствС ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚Π½ΠΎΠ³ΠΎ ΠΊΠ°Π½Π΄ΠΈΠ΄Π°Ρ‚Π°.

Алгоритм Π²Ρ‹Π±ΠΎΡ€Π° ΡƒΠ·Π»Π° привязки для поля ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ S выглядит ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:
  1. Если S связан с элСмСнтом Ρ‡ΡŒΠ΅ вычислСнноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства overflow-anchor Ρ€Π°Π²Π½ΠΎ none, Ρ‚ΠΎΠ³Π΄Π° Π½Π΅ Π²Ρ‹Π±ΠΈΡ€Π°ΠΉΡ‚Π΅ ΡƒΠ·Π΅Π» привязки для S .

  2. Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚Π½ΠΎΠ³ΠΎ ΠΊΠ°Π½Π΄ΠΈΠ΄Π°Ρ‚Π° ПК Π² ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ порядкС, ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅, являСтся Π»ΠΈ PC ТизнСспособным ΠΊΠ°Π½Π΄ΠΈΠ΄Π°Ρ‚ΠΎΠΌ Π² S . Если Π΄Π°, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π΅Π³ΠΎ ΠΊΠ°ΠΊ Π·Π°ΠΊΡ€Π΅ΠΏΠΈΡ‚ΡŒ ΡƒΠ·Π΅Π» ΠΈ ΠΏΡ€Π΅ΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ.

  3. Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π΄ΠΎΡ‡Π΅Ρ€Π½Π΅Π³ΠΎ элСмСнта DOM N элСмСнта ΠΈΠ»ΠΈ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, связанного с S , Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ ΠΊΠ°Π½Π΄ΠΈΠ΄Π°Ρ‚ΠΎΠ² для N Π² S , ΠΈ Π·Π°Π²Π΅Ρ€ΡˆΠ°Π΅Ρ‚ΡΡ, Ссли выбираСтся ΡƒΠ·Π΅Π» привязки.

Алгоритм ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ ΠΊΠ°Π½Π΄ΠΈΠ΄Π°Ρ‚ΠΎΠ² для ΡƒΠ·Π»Π° DOM-ΠΊΠ°Π½Π΄ΠΈΠ΄Π°Ρ‚Π° N Π² ΠΏΠΎΠ»Π΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ S выглядит ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:
  1. Если N — ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½Π½ΠΎΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€Π΅Π²ΠΎ, ΠΈΠ»ΠΈ Ссли N ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π·Π°ΠΊΡ€Π΅ΠΏΠ»Π΅Π½ Π² S , Π·Π°Ρ‚Π΅ΠΌ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ ( N ΠΈ Π΅Π³ΠΎ ΠΏΠΎΡ‚ΠΎΠΌΠΊΠΈ ΠΏΡ€ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ).

  2. Если N ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π²ΠΈΠ΄Π΅Π½ Π² S , Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ N Π² качСствС ΡƒΠ·Π»Π° привязки.

  3. Если N частично Π²ΠΈΠ΄Π΅Π½:

    1. Для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ€Π΅Π±Π΅Π½ΠΊΠ° DOM C ΠΈΠ· N , Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ ΠΊΠ°Π½Π΄ΠΈΠ΄Π°Ρ‚ΠΎΠ² для C Π² S , ΠΈ Π·Π°Π²Π΅Ρ€ΡˆΠ°Π΅Ρ‚ΡΡ, Ссли выбираСтся ΡƒΠ·Π΅Π» привязки.

    2. Для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ элСмСнта A , содСрТащий Π±Π»ΠΎΠΊ N , Π½ΠΎ Ρ‡Π΅ΠΉ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ DOM Π½Π΅ N , Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ ΠΊΠ°Π½Π΄ΠΈΠ΄Π°Ρ‚ΠΎΠ² для A Π² S , ΠΈ Π·Π°Π²Π΅Ρ€ΡˆΠ°Π΅Ρ‚ΡΡ, Ссли выбираСтся ΡƒΠ·Π΅Π» привязки.

    3. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ 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
https://www.w3.org/TR/css-box-4/#content-area Бсылка Π²: https://www.w3.org/TR/css-box-4/#propdef-margin Бсылка Π²: https://www.w3.org/TR/css-box-4/#propdef-padding Бсылка Π²: https: // www.w3.org/TR/css-display-3/#atomic-inline Бсылка Π²: https://www.w3.org/TR/css-display-3/#box Бсылка Π²: https://www.w3.org/TR/css-display-3/#contain-block Бсылка Π²: https://www.w3.org/TR/css-display-3/#propdef-display Бсылка Π²: https://www.w3.org/TR/css-display-3/#valdef-display-none Бсылка Π²: https://www.w3.org/TR/css-overflow-3/#scroll-container Бсылка Π²: https://www.w3.org/TR/css-overflow-3/#scrollable-overflow-rectangle Бсылка Π²: https: // www.w3.org/TR/css-position-3/#valdef-position-absolute Бсылка Π²: https://www.w3.org/TR/css-position-3/#propdef-bottom Бсылка Π²: https://www.w3.org/TR/css-position-3/#valdef-position-fixed Бсылка Π²: https://www.w3.org/TR/css-position-3/#propdef-left Бсылка Π²: https://www.w3.org/TR/css-position-3/#propdef-position Бсылка Π²: https://www.w3.org/TR/css-position-3/#propdef-right Бсылка Π²: https: // www.w3.org/TR/css-position-3/#propdef-top Бсылка Π²: https://www.w3.org/TR/css-scroll-snap-1/#optimal-viewing-region Бсылка Π²: https://www.w3.org/TR/css-scroll-snap-1/#propdef-scroll-padding Бсылка Π²: https://www.w3.org/TR/css-sizing-3/#propdef-height Бсылка Π²: https://www.w3.org/TR/css-sizing-3/#propdef-max-height Бсылка Π²: https://www.w3.org/TR/css-sizing-3/#propdef-max-width Бсылка Π²: https: // www.w3.org/TR/css-sizing-3/#propdef-min-height Бсылка Π²: https://www.w3.org/TR/css-sizing-3/#propdef-min-width Бсылка Π²: https://www.w3.org/TR/css-sizing-3/#propdef-width Бсылка Π²: https://www.w3.org/TR/css-transforms-1/#propdef-transform Бсылка Π²: https://www. w3.org/TR/css-values-4/#css-wide-keywords Бсылка Π²: https://www.w3.org/TR/css-values-4/#comb-one Бсылка Π²: https: // www.w3.org/TR/css-writing-modes-4/#block-flow-direction Бсылка Π²: https://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect Бсылка Π²: https://www.w3.org/TR/cssom-view/#eventdef-document-scroll Бсылка Π²: https://drafts.csswg.org/cssom-view-1/#scrolling-box Бсылка Π²: https://dom.spec.whatwg.org/#concept-tree-descendant Бсылка Π²: https://html.spec.whatwg.org/multipage/interaction.html#dom-anchor Бсылка Π²: https: // html.spec.whatwg.org/multipage/interaction.html#focused-area-of-the-document Бсылка Π²:

Π’Π΅Ρ€ΠΌΠΈΠ½Ρ‹, ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ ссылкой

  • [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

ИндСкс собствСнности

Имя Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ ΠΠ°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠŸΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ ΠΊ дюйм.% возрастов Π’ΠΈΠΏ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠšΠ°Π½ΠΎΠ½ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ порядок РасчСтноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅
Π°Π½ΠΊΠ΅Ρ€ ΠΏΠ΅Ρ€Π΅Π»ΠΈΠ²Π° Π°Π²Ρ‚ΠΎ | Π½ΠΈΠΊΡ‚ΠΎ Π°Π²Ρ‚ΠΎ всС элСмСнты Π½Π΅Ρ‚ Π½ / Π΄ дискрСтный Π·Π° Π³Ρ€Π°ΠΌΠΌΠ°Ρ‚ΠΈΠΊΡƒ ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ΅ слово
# scroll-anchoring-anchor-node Бсылка Π²: # anchor-viable-ΠΊΠ°Π½Π΄ΠΈΠ΄Π°Ρ‚Π° Бсылка Π²: # anchor-priority-sizes Бсылка Π²: # Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ привязки Бсылка Π²: # кандидатский экзамСн Бсылка Π²: # excluded-subtree Бсылка Π²: # ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΉ Бсылка Π½Π°: # ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΎΠ±Ρ€Π΅Π·Π°Π½Π½Ρ‹ΠΉ Бсылка Π½Π°: # частично Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΉ Бсылка Π½Π°: # scroll-anchoring-bounding-rect Бсылка Π²: # suppression-window Бсылка Π²: # Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€ подавлСния Бсылка Π½Π°: # propdef-overflow-anchor Бсылка Π²: # valdef-overflow-anchor-none Бсылка Π²: .