Π Π°Π·Π½ΠΎΠ΅

Π‘ΠΊΡ€ΠΎΠ»Π» html: Атрибут scrolling | htmlbook.ru

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

Атрибут scrolling | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+4.0+1.0+1.0+1.0+1.0+

БпСцификация

HTML:3.24.015.0XHTML:1.01.1

ОписаниС

Если содСрТимоС Ρ„Ρ€Π΅ΠΉΠΌΠ° Π½Π΅ помСщаСтся Π² ΠΎΡ‚Π²Π΅Π΄Π΅Π½Π½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, автоматичСски ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ
полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ для просмотра ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ. Π’ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях, полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ
Π½Π°Ρ€ΡƒΡˆΠ°ΡŽΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½ Π²Π΅Π±-страницы, поэтому ΠΎΡ‚ Π½ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ. Для управлСния
ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ полос ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ scrolling.

Бинтаксис

<iframe scrolling="auto | no | yes">...</iframe>

ЗначСния

auto
ΠŸΠΎΠ»ΠΎΡΡ‹ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ нСобходимости, Π² Ρ‚ΠΎΠΌ случаС,
ΠΊΠΎΠ³Π΄Π° содСрТимоС Ρ„Ρ€Π΅ΠΉΠΌΠ° ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°Π΅Ρ‚ Π΅Π³ΠΎ Π²ΠΈΠ΄ΠΈΠΌΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ.
no
Π—Π°ΠΏΡ€Π΅Ρ‰Π°Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ полос ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.
yes
ВсСгда Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ появлСниС полос ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, нСзависимо ΠΎΡ‚ объСма ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ

auto

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Π’Π΅Π³ IFRAME, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ scrolling</title>
 </head>
 <body>

  <iframe src="tip.html" scrolling="no"></iframe>

 </body>
</html>

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ div Π±Π»ΠΎΠΊ с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ?

1. Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ overflow Π² CSS?
2. Бвойства ΠΈ значСния overflow
3. ΠŸΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ установка Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² Π±Π»ΠΎΠΊΠ΅ CSS
4. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ div Π±Π»ΠΎΠΊΠ° с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ

Π’ Π΄Π°Π½Π½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ Ρ€Π°Π·Π±Π΅Ρ€Ρ‘ΠΌ вопрос создания Π±Π»ΠΎΠΊΠ° (div) фиксированного Ρ€Π°Π·ΠΌΠ΅Ρ€Π° с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ срСдствами CSS. Π—Π° это ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ свойство overflow.

О ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΌ свойствС overflow

Бвойство overflow ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ содСрТания Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ элСмСнта. МоТно ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π² Ρ‚ΠΎΠΌ случаС, ΠΊΠΎΠ³Π΄Π° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π½Π΅ помСщаСтся ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΈ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ Π·Π° ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π±Π»ΠΎΠΊΠ°.

overflow-x — ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ содСрТания Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ элСмСнта ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ.
overflow-y — ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ содСрТания Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ элСмСнта ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ.

Код CSS

.prokrutkaΒ {
overflow:Β auto;Β /* свойство для прокрутки по горизонтали. Автоматом,Β Π΅ΡΠ»ΠΈΒ ΡΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅Β Π±ΠΎΠ»ΡŒΡˆΠ΅Β Π±Π»ΠΎΠΊΠ°Β */
}

Бвойства ΠΈ значСния overflow

visible — отобраТаСтся всС содСрТаниС элСмСнта, Π΄Π°ΠΆΠ΅ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ установлСнной ΡˆΠΈΡ€ΠΈΠ½Ρ‹.
hidden — отобраТаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта, ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ΅ скрыто.
scroll — ΠΏΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ добавляСтся Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ (y) ΠΈΠ»ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ (x) полоса ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.
auto — Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΎΠΌ добавляСтся Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ полоса ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, Π² случаС Ссли Π±Π»ΠΎΠΊ мСньшС.

Рассмотри ΠΏΡ€ΠΈΠΌΠ΅Ρ€ класса CSS. Π’ width ΠΈ height устанавливаСм Π½ΡƒΠΆΠ½Ρ‹Π΅ Π½Π°ΠΌ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту Π±Π»ΠΎΠΊΠ° (Π·Π° Π½ΠΈΡ… Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ содСрТимоС Π±Π»ΠΎΠΊΠ°), Π° свойством overflow: auto; Π·Π°Π΄Π°Π΅ΠΌ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ Π² случаС надобности

Код CSS

.prokrutkaΒ {
width:150px;Β /*Β ΡˆΠΈΡ€ΠΈΠ½Π°Β Π½Π°ΡˆΠ΅Π³ΠΎΒ Π±Π»ΠΎΠΊΠ°Β */
height:100px;Β /*Β Π²Ρ‹ΡΠΎΡ‚Π°Β Π½Π°ΡˆΠ΅Π³ΠΎΒ Π±Π»ΠΎΠΊΠ°Β */
background:Β #fff;Β /*Β Ρ†Π²Π΅Ρ‚Β Ρ„ΠΎΠ½Π°,Β Π±Π΅Π»Ρ‹ΠΉΒ */
border:Β 1pxΒ solidΒ #C1C1C1;Β /*Β Ρ€Π°Π·ΠΌΠ΅Ρ€Β ΠΈΒ Ρ†Π²Π΅Ρ‚Β Π³Ρ€Π°Π½ΠΈΡ†Ρ‹Β Π±Π»ΠΎΠΊΠ°Β */
overflow:Β auto;Β /* свойство для прокрутки по горизонтали. Автоматом, Ссли большС блока */
}

ΠŸΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ установка ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² Π±Π»ΠΎΠΊΠ΅ CSS

МоТно Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ ΠΏΠΎ высотС ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π΅. Для этого ΠΊΠ°ΠΆΠ΄ΠΎΠΉ оси: overflow-y: scroll; (Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒ) overflow-x: scroll; (Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒ) ΡƒΠΊΠ°ΠΆΠ΅ΠΌ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ scroll, ΠΏΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ°.

Код HTML и CSS

.prokrutkaΒ {
height:150px;Β /*Β Π²Ρ‹ΡΠΎΡ‚Π°Β Π½Π°ΡˆΠ΅Π³ΠΎΒ Π±Π»ΠΎΠΊΠ°Β */
background:Β #fff;Β /*Β Ρ†Π²Π΅Ρ‚Β Ρ„ΠΎΠ½Π°,Β Π±Π΅Π»Ρ‹ΠΉΒ */
border:Β 1pxΒ solidΒ #C1C1C1;Β /*Β Ρ€Π°Π·ΠΌΠ΅Ρ€Β ΠΈΒ Ρ†Π²Π΅Ρ‚Β Π³Ρ€Π°Π½ΠΈΡ†Ρ‹Β Π±Π»ΠΎΠΊΠ°Β */
overflow-x:Β scroll;Β /*Β ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ°Β ΠΏΠΎΒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈΒ */
overflow-y:Β scroll;Β /*Β ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ°Β ΠΏΠΎΒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈΒ */
}

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ div Π±Π»ΠΎΠΊΠ° с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ

Код HTML и CSS

<html>
Β Β <head>
Β Β Β Β <title>ΠŸΡ€ΠΈΠΌΠ΅Ρ€Β Ρ€Π°Π±ΠΎΡ‚Ρ‹Β CSS</title>
<metaΒ http-equiv=Content-TypeΒ content="text/html;charset=utf-8">

<style>
.prokrutkaΒ {
height:Β 200px;Β /*Β Π²Ρ‹ΡΠΎΡ‚Π°Β Π½Π°ΡˆΠ΅Π³ΠΎΒ Π±Π»ΠΎΠΊΠ°Β */
width:Β 200px;Β /*Β ΡˆΠΈΡ€ΠΈΠ½Π°Β Π½Π°ΡˆΠ΅Π³ΠΎΒ Π±Π»ΠΎΠΊΠ°Β */
background:Β #fff;Β /*Β Ρ†Π²Π΅Ρ‚Β Ρ„ΠΎΠ½Π°,Β Π±Π΅Π»Ρ‹ΠΉΒ */
border:Β 1pxΒ solidΒ #C1C1C1;Β /*Β Ρ€Π°Π·ΠΌΠ΅Ρ€Β ΠΈΒ Ρ†Π²Π΅Ρ‚Β Π³Ρ€Π°Π½ΠΈΡ†Ρ‹Β Π±Π»ΠΎΠΊΠ°Β */
overflow-x:Β scroll;Β /*Β ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ°Β ΠΏΠΎΒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈΒ */
overflow-y:Β scroll;Β /*Β ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ°Β ΠΏΠΎΒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈΒ */
}
</style>

Β Β </head>

Β Β <body>
<divΒ class="prokrutka">
А тут много-много разного тСкста и прочСй информации. А тут много-много разного тСкста и прочСй информации. А тут много-много разного тСкста и прочСй информации. А тут много-много разного тСкста и прочСй информации. А тут много-много разного тСкста и прочСй информации. А тут много-много разного тСкста и прочСй информации. А тут много-много разного тСкста и прочСй информации. А тут много-много разного тСкста и прочСй информации.Β 
</div>
Β Β </body>
</html>

Одно ΠΈΠ· свойств overflow ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ, Ρ‚ΠΎΠ³Π΄Π° останСтся ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΉ оси, Ρ‡Π΅Π³ΠΎ Π²ΠΏΠΎΠ»Π½Π΅ достаточно.
ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ скрипта Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π½ΠΈΠΆΠ΅.ДСмонстрация Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ исходники
МоТно ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΎΠ΄Π½ΠΎΠΉ оси. Для этого соотвСтствСнно ΡƒΠ±Π΅Ρ€ΠΈΡ‚Π΅ строку Π»ΠΈΠ±ΠΎ с overflow-x, Π»ΠΈΠ±ΠΎ с overflow-y.

Бпасибо Π·Π° Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅! НадСюсь ΡΡ‚Π°Ρ‚ΡŒΡ Π±Ρ‹Π»Π° ΠΏΠΎΠ»Π΅Π·Π½Π°!

Атрибут scrolling | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

БпСцификация

HTML:3.24.015.0XHTML:1.01.1

ОписаниС

Если содСрТимоС Ρ„Ρ€Π΅ΠΉΠΌΠ° Π½Π΅ помСщаСтся Π² ΠΎΡ‚Π²Π΅Π΄Π΅Π½Π½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ, автоматичСски ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ
полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ для просмотра ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ. Π’ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях, полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ
Π½Π°Ρ€ΡƒΡˆΠ°ΡŽΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½ Π²Π΅Π±-страницы, поэтому ΠΎΡ‚ Π½ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ. Для управлСния
ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ полос ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ scrolling.

Бинтаксис

<frame scrolling="auto | no | yes">

ЗначСния

auto
ΠŸΠΎΠ»ΠΎΡΡ‹ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ нСобходимости, Π² Ρ‚ΠΎΠΌ случаС,
ΠΊΠΎΠ³Π΄Π° содСрТимоС Ρ„Ρ€Π΅ΠΉΠΌΠ° ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°Π΅Ρ‚ Π΅Π³ΠΎ Π²ΠΈΠ΄ΠΈΠΌΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ.
no
Π—Π°ΠΏΡ€Π΅Ρ‰Π°Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ полос ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.
yes
ВсСгда Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ появлСниС полос ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, нСзависимо ΠΎΡ‚ объСма ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ

auto

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Π’Π΅Π³ FRAME, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ scrolling</title>
 </head>

 <frameset cols="100,*">
   <frame src="left.html" name="leftFrame" noresize scrolling="no">
   <frame src="main.html" name="mainFrame">
 </frameset>

</html>

Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Π±Π»ΠΎΠΊ с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΡ‹ΠΌ тСкстом с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS ΠΈ HTML

ΠŸΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΡ‹ΠΉ HTML-Π±Π»ΠΎΠΊ β€” это Π±Π»ΠΎΠΊ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° Π΅Π³ΠΎ содСрТимоС большС Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² самого Π±Π»ΠΎΠΊΠ°, справа ΠΈ снизу ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ. Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, Ссли Ρƒ вас Π΅ΡΡ‚ΡŒ Π±Π»ΠΎΠΊ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒΡΡ ΠΎΠΊΠΎΠ»ΠΎ 50 слов, ΠΈ Ρƒ вас Π΅ΡΡ‚ΡŒ тСкст, состоящий ΠΈΠ· 200 слов, Π² ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΠΎΠΌ HTML-Π±Π»ΠΎΠΊΠ΅ появятся полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ 150 слов. Π’ стандартном HTML-Π±Π»ΠΎΠΊΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ тСкст просто Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ Π·Π° Π΅Π³ΠΎ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹.

Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΡ‹ΠΉ HTML-Π±Π»ΠΎΠΊ (скролл для сайта) довольно просто.

Π’Π°ΠΌ просто Π½ΡƒΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту элСмСнта, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство CSS overflow, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ элСмСнта, ΠΊΠΎΠ³Π΄Π° содСрТимоС Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ Π·Π° Π΅Π³ΠΎ ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹.

Когда тСкста большС, Ρ‡Π΅ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒΡΡ Π² доступноС пространство ΠΌΠ°ΠΊΠ΅Ρ‚Π°, Ρƒ вас Π΅ΡΡ‚ΡŒ нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ²:

  • ΠŸΠ΅Ρ€Π΅ΠΏΠΈΡˆΠΈΡ‚Π΅ тСкст, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ стал ΠΊΠΎΡ€ΠΎΡ‡Π΅.
  • ΠŸΠΎΠ·Π²ΠΎΠ»ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ тСкст Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΠ» Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, ΠΈ Π½Π°Π΄Π΅ΠΉΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°ΡΡ‚ΡΠ³ΠΈΠ²Π°Ρ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒΡΡ с этой ситуациСй.
  • ΠžΠ±Ρ€Π΅ΠΆΡŒΡ‚Π΅ тСкст Ρ‚Π°ΠΌ, Π³Π΄Π΅ ΠΎΠ½ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.
  • Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ (для тСкста β€” ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅), Ρ‡Ρ‚ΠΎΠ±Ρ‹ с ΠΈΡ… ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ вСсь тСкст.

Π›ΡƒΡ‡ΡˆΠΈΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, являСтся послСдний: ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΡ‹ΠΉ тСкстовый Π±Π»ΠΎΠΊ. Π’ΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ смоТСт ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ вСсь тСкст, Π° ΠΌΠ°ΠΊΠ΅Ρ‚ останСтся Π±Π΅Π· ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.

HTML ΠΈ CSS для этого:

<div>здСсь тСкст....</div>

overflow: auto; ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ (скролл), Ссли тСкст Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ Π·Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π±Π»ΠΎΠΊΠ° div.

Но для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ это сработало, Ρ‚Π°ΠΊΠΆΠ΅ Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ для этого Π±Π»ΠΎΠΊΠ° div свойства ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ высоты, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ тСкст, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства overflow с auto Π½Π° hidden. Если Π²Ρ‹ Π½Π΅ ΡƒΠΊΠ°ΠΆΠ΅Ρ‚Π΅ свойство overflow, скролл Π½Π° сайтС Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚, ΠΈ тСкст Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π·Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π±Π»ΠΎΠΊΠ° div.

Если Ρƒ вас Π΅ΡΡ‚ΡŒ большоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° мСньшСм пространствС, ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π²ΠΎΠΊΡ€ΡƒΠ³ Π½Π΅Π³ΠΎ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ для тСкста.

<p><img src="images/shasta_with_disc.jpg" alt="Shasta playing frisbee" /> </p>

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ 400 Π½Π° 509 пиксСлСй Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΎ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π°Π±Π·Π°Ρ†Π°, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ составляСт 300 Π½Π° 300 пиксСлСй.

Π”Π»ΠΈΠ½Π½Ρ‹Π΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‡Π΅Π½ΡŒ Ρ‚Ρ€ΡƒΠ΄Π½Ρ‹ΠΌΠΈ для восприятия, Π½ΠΎ, помСщая ΠΈΡ… Π² Π±Π»ΠΎΠΊ div ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, Π° Π·Π°Ρ‚Π΅ΠΌ, добавляя свойство overflow (ΠΊΠ°ΠΊ способ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ скролл), ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ с большим количСством Π΄Π°Π½Π½Ρ‹Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ Π·Π°ΠΉΠΌΡƒΡ‚ слишком ΠΌΠ½ΠΎΠ³ΠΎ пространства Π½Π° страницС,

Π‘Π°ΠΌΡ‹ΠΉ простой способ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это β€” Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ тСкст, просто ΠΎΠ±Π΅Ρ€Π½ΠΈΡ‚Π΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ Π² Π±Π»ΠΎΠΊ div, установитС Π΅Π³ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ свойство overflow (скролл Π²Π½ΡƒΡ‚Ρ€ΠΈ div):

<div><table>   <thead>    <tr>      <th>Name</th>      <th>Phone</th>    </tr>  </thead>  <tbody>    <tr>      <td>Jennifer</td>      <td>502-5366</td>    </tr>    ....  </tbody></table></div>

Однако ΠΏΡ€ΠΈ этом ΠΈΠΌΠ΅Π΅Ρ‚ мСсто ΠΎΠ΄ΠΈΠ½ нюанс. Π’ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Ρ… случаях, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Ρ‚Π°ΠΊΠΆΠ΅ появляСтся Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ скролл, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ всю Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ, Π½ΡƒΠΆΠ½Ρ‹ Π΄Π²Π΅ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.

БущСствуСт мноТСство способов ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ это, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅. Но я ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽ просто ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΡƒΡŽ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства CSS3 overflow-x. ΠŸΡ€ΠΎΡΡ‚ΠΎ ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅ для Π±Π»ΠΎΠΊΠ° div свойство overflow-x: hidden;, ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ полоса ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠ΄Π°Π»Π΅Π½Π°. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ с этим Ρƒ вас Π½Π΅ исчСз ΠΈ сам ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.

<div> 

Одна Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ приятная ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Firefox Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство overflow Π²ΠΎ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΡ… Ρ‚Π΅Π³Π°Ρ… Ρ‚Π°Π±Π»ΠΈΡ†, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ tbody ΠΈ thead ΠΈΠ»ΠΈ tfoot. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ для содСрТимого Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Π° ячСйки Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² останутся привязанными ΠΊ Π½ΠΈΠΌ.

Π­Ρ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Firefox, Ρ‡Ρ‚ΠΎ Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ, Π½ΠΎ это полСзная функция, Ссли ваши Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Firefox. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ я имСю Π² Π²ΠΈΠ΄Ρƒ.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jennifer</td>
      <td>502-5366</td>
    </tr>
    ... 

Данная публикация прСдставляСт собой ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΡΡ‚Π°Ρ‚ΡŒΠΈ Β«HTML Scroll BoxΒ» , ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ Π΄Ρ€ΡƒΠΆΠ½ΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ.Ρ€Ρƒ

Ρ‚Π΅Π»Π΅Π³Ρ€Π°ΠΌ ΠΊΠ°Π½Π°Π». Подпишись, Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ!

НСсколько Π½Π΅ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½Ρ‹Ρ… frontend-хитростСй / Π‘Π»ΠΎΠ³ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ Wargaming / Π₯Π°Π±Ρ€

Под ΠΊΠ°Ρ‚ΠΎΠΌ Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ быстро ΠΈ Π»Π΅Π³ΠΊΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚ΡŒ взаимодСйствиС с SVG-ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΠ»Π°Π²Π½Ρ‹ΠΉ скролл с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΠ΄Π½ΠΎΠ³ΠΎ CSS-ΠΏΡ€Π°Π²ΠΈΠ»Π°, Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ появлСниС Π½ΠΎΠ²Ρ‹Ρ… элСмСнтов Π½Π° страницС, ΠΏΠ΅Ρ€Π΅Π½ΠΎΡΠΈΡ‚ΡŒ тСкст Π½Π° Π½ΠΎΠ²ΡƒΡŽ строку с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS ΠΈ ΠΎ Π½ΠΎΠ²Ρ‹Ρ… способах оформлСния Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ тСкста.

ΠžΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ тСкста (text-decoration-style, text-decoration-color)

Π’ Firefox ΠΈ Safari ΡƒΠΆΠ΅ довольно Π΄Π°Π²Π½ΠΎ появились Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ возмоТности для оформлСния Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ, которая добавляСтся ΠΊ тСксту с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства text-decoration.

К ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ свойству text-decoration сразу нСсколько Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ (ΠΏΡ€ΠΈΡ‡Π΅ΠΌ это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΡƒΠΆΠ΅ ΠΎΡ‡Π΅Π½ΡŒ Π΄Π°Π²Π½ΠΎ):

.multiple {
  text-decoration: underline overline;
}

МоТно Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ для оформлСния тСкста:

.color {
  text-decoration-color: blue;
}

А Ρ‚Π°ΠΊΠΆΠ΅ ΡΡ‚ΠΈΠ»ΡŒ Π»ΠΈΠ½ΠΈΠΈ:

.dashed {
  text-decoration-style: dashed;
}
.dotted {
  text-decoration-style: dotted;
}
.wavy {
  text-decoration-style: wavy;
}

Π£Ρ‡Ρ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π² Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π½ΠΎΠ²Ρ‹Π΅ свойства Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Firefox ΠΈ, частично, Π² Safari. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΌΠΎΠΆΠ½ΠΎ здСсь

Плавная ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° страницы Π½Π° CSS (scroll-behaviour)

ΠœΠ°Π»ΠΎΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΠΎΠ΅, Π½ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠ΅ свойство scroll-behaviour ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π½Π°ΠΌ ΠΎΠ΄Π½ΠΎΠΉ строкой ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ скролл Π½Π° страницС ΠΏΠ»Π°Π²Π½Ρ‹ΠΌ. Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΊΠ°ΠΊ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ Π² Π½ΡƒΠΆΠ½ΠΎΠ΅ мСсто ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π΅ ΠΏΠΎ якорям, Ρ‚Π°ΠΊ ΠΈ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ страницы JS-ΠΎΠΌ.

body {
  scroll-behavior: smooth;
}

Бвойство ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ 3 основных значСния:

  • smooth β€” плавная ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ°;
  • instant β€” мгновСнная ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ°;
  • auto β€” Π½Π° усмотрСниС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

Когда Π½ΠΈΠ±ΡƒΠ΄ΡŒ (надСюсь, совсСм скоро) Π½Π°ΠΌ Π½Π΅ придСтся большС ΠΏΠΈΡΠ°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ для ΠΏΠ»Π°Π²Π½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π½Π° JS ΠΈΠ»ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ сторонниС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ.

Если плавная ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° страницы Π½Π° вашСм сайтС Π½Π΅ являСтся Ρ‡Π΅ΠΌ-Ρ‚ΠΎ ΠΊΡ€ΠΈΡ‚ΠΈΡ‡Π½Ρ‹ΠΌ, смСло ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ это свойство. Π’Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ ΠΏΠ»Π°Π²Π½Ρ‹ΠΉ скролл ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π΅ ΠΏΠΎ якорям с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ всСго ΠΎΠ΄Π½ΠΎΠ³ΠΎ CSS-ΠΏΡ€Π°Π²ΠΈΠ»Π° ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ, Π² Firefox .
ΠŸΡ€ΠΈΠΌΠ΅Ρ€

Анимация появлСния элСмСнта (быстро ΠΈ Π»Π΅Π³ΠΊΠΎ)

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


Как это часто Π΄Π΅Π»Π°Π»ΠΈ Ρ€Π°Π½ΡŒΡˆΠ΅:

1) Π½Π° сСрвСр посылаСтcя запрос;

2) послС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΎΡ‚Π²Π΅Ρ‚Π° Π΄Π°Π½Π½Ρ‹Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ Π² скрытый Π½Π° страницС Π±Π»ΠΎΠΊ;

3) Π±Π»ΠΎΠΊΡƒ присваиваСтся класс, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ прописана анимация Π΅Π³ΠΎ появлСниС (Π»ΠΈΠ±ΠΎ (ΠΎ, уТас!) Π±Π»ΠΎΠΊ анимируСтся JS-ΠΎΠΌ).

Π’Π°ΠΊ Π²ΠΎΡ‚, послСдний ΠΏΡƒΠ½ΠΊΡ‚ ΠΌΠΎΠΆΠ½ΠΎ ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΠΈΠ·Π±Ρ‹Ρ‚ΠΎΡ‡Π½Ρ‹ΠΌ, вСдь Ρƒ нас Π΅ΡΡ‚ΡŒ староС Π΄ΠΎΠ±Ρ€ΠΎΠ΅ CSS-свойство animation. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ анимация срабатываСт ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ страницы Π»ΠΈΠ±ΠΎ ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ DOM-Π΄Π΅Ρ€Π΅Π²Π° (Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ элСмСнту класса с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΈΠ»ΠΈ самого элСмСнта). ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ, Π²Π°ΠΆΠ½ΠΎ Π½Π΅ Ρ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π½Π΅Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ Π² DOM, Π° Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΈΡ… динамичСски Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ.

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.content {
  animation: fade-in .4s ease;
}

Π’ΠΎΡ‚ ΠΈ всС, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ для создания простой Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ появлСния. ΠŸΠ»ΡŽΡΡ‹ Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½Ρ‹:

  • ΠŸΡ€ΠΎΠΏΠΈΡΠ°Π² @keyframes ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π·, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… Π² любом мСстС CSS для добавлСния Ρ‚ΠΈΠΏΠΎΠ²ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ всСм Π½ΡƒΠΆΠ½Ρ‹ΠΌ элСмСнтам;
  • ΠžΠ±Ρ€Π°Ρ‰Π΅Π½ΠΈΡ ΠΊ DOM Π² JS Π±ΡƒΠ΄ΡƒΡ‚ свСдСны ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ большом количСствС элСмСнтов ΠΈΠ»ΠΈ ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ½ΠΈΠ·ΠΈΡ‚ΡŒ Π½Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ Π½Π° страницу.

ΠœΠΈΠ½ΡƒΡ Ρƒ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½: Π½ΠΎΠ²Ρ‹Π΅ элСмСнты Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Ρ…Ρ€Π°Π½ΠΈΡ‚ΡŒΡΡ Π² DOM ΠΈ ΠΆΠ΄Π°Ρ‚ΡŒ, ΠΏΠΎΠΊΠ° ΠΌΡ‹ Π½Π°ΠΏΠΎΠ»Π½ΠΈΠΌ ΠΈΡ… ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ. Π˜Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ придСтся Ρ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π½Π° сторонС JS…

Π˜Π·ΡƒΡ‡ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΌΠΎΠΆΠ½ΠΎ здСсь.

Π Π°Π·Ρ€Ρ‹Π² строки Π½Π° CSS


Если Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ мСстС Π½Π° страницС Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ пСрСнос строки, Π° Π² HTML Π»Π΅Π·Ρ‚ΡŒ Π½Π΅ хочСтся (ΠΈΠ»ΠΈ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ), Π½Π° ΠΏΠΎΠΌΠΎΡ‰ΡŒ ΠΏΡ€ΠΈΠ΄Π΅Ρ‚ CSS. ΠŸΠ΅Ρ€Π²ΠΎΠ΅, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΡ‚ Π² Π³ΠΎΠ»ΠΎΠ²Ρƒ β€” Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ псСвдоэлСмСнт с Ρ‚Π΅Π³ΠΎΠΌ Π²Π½ΡƒΡ‚Ρ€ΠΈ:

.break:after {
    content: '<br />';
}

К соТалСнию (Π° ΠΌΠΎΠΆΠ΅Ρ‚, ΠΈ ΠΊ ΡΡ‡Π°ΡΡ‚ΡŒΡŽ), Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Ρ‚Π΅Π³ΠΈ Π² псСвдоэлСмСнты, нСльзя. Но Π²Ρ‹Ρ…ΠΎΠ΄ Π΅ΡΡ‚ΡŒ!

.break:after {
    content: '\A'; //ΠΊΠΎΠ΄ пСрСноса строки
    white-space: pre; //заставляСт Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ тСкст с ΡƒΡ‡Ρ‘Ρ‚ΠΎΠΌ всСх ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ² ΠΈ пСрСносов, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½Ρ‹Ρ… Π² ΠΊΠΎΠ΄
}

МалСнький ΠΏΡ€ΠΈΠΌΠ΅Ρ€.

SVG с ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ элСмСнтами

Если Π²Π°ΠΌ ΠΊΠΎΠ³Π΄Π°-Π½ΠΈΠ±ΡƒΠ΄ΡŒ ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΠ»ΠΎΡΡŒ ΠΎΡ„ΠΎΡ€ΠΌΠ»ΡΡ‚ΡŒ взаимодСйствиС с SVG-элСмСнтами, Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это Π½Π΅ Ρ‚Π°ΠΊ-Ρ‚ΠΎ просто. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ Π² CSS ΠΊ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌ SVG-элСмСнтам, приходится Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π½Π° страницу Π½Π΅ Ρ‚Π΅Π³ <img/&gt, Π° ΠΊΠΎΠ΄ всСго SVG-изобраТСния Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ. Π­Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ HTML-ΠΊΠΎΠ΄ уТасно Π³Ρ€ΠΎΠΌΠΎΠ·Π΄ΠΊΠΈΠΌ. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ Π½Π°ΠΌ приходится ΠΆΠ΅Ρ€Ρ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ страницы ΠΈ Π»Π°ΠΊΠΎΠ½ΠΈΡ‡Π½ΠΎΡΡ‚ΡŒΡŽ ΠΊΠΎΠ΄Π° Ρ€Π°Π΄ΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… эффСктов.

Но! Π£ нас Π΅ΡΡ‚ΡŒ нСплохая Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π° β€” ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ всС стили взаимодСйствия прямо Π² SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <defs>
        <style type="text/css">
            rect {
                fill: blue;
            }
            rect:hover {
                fill: orange;
            }
        </style>
    </defs>

    <rect />
    <rect />
    <rect />
    <rect />
</svg>

Казалось Π±Ρ‹, Ссли ΠΌΡ‹ прописали стили Π² самом ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ, Ρ‚ΠΎ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΡ‚Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ SVG ΠΊΠ°ΠΊ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ <img />! Однако, Π½Π΅ всС Ρ‚Π°ΠΊ просто. Π”ΠΎΠ±Π°Π²Π»Π΅Π½Π½Ρ‹Π΅ Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ стили всС Ρ€Π°Π²Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚. Но ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ…ΠΎΠ΄ ΠΊΠΎΠ½Π΅ΠΌ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ SVG Π½Π° страницу с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ <iframe> ΠΈΠ»ΠΈ <object>:

<iframe src="icon.svg"></iframe>

ΠΈΠ»ΠΈ

<object type="image/svg+xml" data="icon.svg"></object>

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, это Π½Π΅ самоС красивоС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, Π½ΠΎ ΠΎΠ½ΠΎ явно Π»ΡƒΡ‡ΡˆΠ΅, Ρ‡Π΅ΠΌ захламлСнная SVG-ΠΊΠΎΠ΄ΠΎΠΌ страница. Если Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅ Π±ΠΎΠ»Π΅Π΅ красивый способ, поТалуйста, ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ ΠΈΠΌ Π² коммСнтариях!

UPD. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Large подСлился классным Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ описано здСсь.

Π•ΡˆΠ΅ ΠΎΠ΄Π½ΠΎ интСрСсноС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΎΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ exeto.

ΠšΡΡ‚Π°Ρ‚ΠΈ, ΠΏΡ€ΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ Π² SVG-Ρ„Π°ΠΉΠ» ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈ CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <defs>
        <style type="text/css">
            @keyframes fill-change {
                0% {
                    fill: blue;
                }
                50% {
                    fill: orange;
                }
                100% {
                    fill: blue;
                }
            }
        
            rect {
                animation: 2s ease fill-change infinite;
                fill: blue;
            }
        </style>
    </defs>
    
    <rect />
    <rect />
    <rect />
    <rect />
    <path />
</svg>

НадСюсь, описанныС здСсь Π²Π΅Ρ‰ΠΈ показались Π²Π°ΠΌ интСрСсными, Π° ΠΊΠΎΠΌΡƒ-Ρ‚ΠΎ Π΄Π°ΠΆΠ΅ пригодятся Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅. Π”ΠΎ Π½ΠΎΠ²Ρ‹Ρ… встрСч!

overflow | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+3.61.0+1.0+1.0+

ΠšΡ€Π°Ρ‚ΠΊΠ°Ρ информация

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽvisible
НаслСдуСтсяНСт
ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅Ρ‚ΡΡΠš Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌ элСмСнтам
ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚Π½Π°Ρ Π·Π°ΠΏΠΈΡΡŒΠΠ΅ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΠ°
Бсылка Π½Π° ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡŽhttp://www.w3.org/TR/CSS21/visufx.html#propdef-overflow

ВСрсии CSS

CSS 1CSS 2CSS 2.1CSS 3

ОписаниС

Бвойство overflow управляСт ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ содСрТания
Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ элСмСнта, Ссли ΠΎΠ½ΠΎ Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ Π½Π΅ помСщаСтся ΠΈ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ Π·Π° ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π·Π°Π΄Π°Π½Π½Ρ‹Ρ…
Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ².

Бинтаксис

overflow: auto | hidden | scroll | visible | inherit

ЗначСния

visible
ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ΡΡ всС содСрТаниС элСмСнта, Π΄Π°ΠΆΠ΅ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ установлСнной высоты
ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹.
hidden
ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта, ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ скрыто.
scroll
ВсСгда Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.
auto
ΠŸΠΎΠ»ΠΎΡΡ‹ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈ нСобходимости.
inherit
НаслСдуСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ родитСля.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>overflow</title>
  <style>
   .layer {
    overflow: scroll; /* ДобавляСм полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ */
    width: 300px; /* Π¨ΠΈΡ€ΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° */
    height: 150px; /* Высота Π±Π»ΠΎΠΊΠ° */
    padding: 5px; /* Поля Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста */
    border: solid 1px black; /* ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ€Π°ΠΌΠΊΠΈ */
   } 
  </style>
 </head>
 <body> 
   <div>
   <h3>Duis te feugifacilisi</h3>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
    nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
    Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div> 
 </body>
</html>

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° рис. 1.

Рис. 1. ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ свойства overflow

ΠžΠ±ΡŠΠ΅ΠΊΡ‚Π½Π°Ρ модСль

[window.]document.getElementById(«elementID»).style.overflow

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹

Internet Explorer Π΄ΠΎ вСрсии 7.0 Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ:

  • Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ inherit;
  • ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ элСмСнты, значСния overflow Ρƒ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π·Π°Π΄Π°Π½Ρ‹ ΠΊΠ°ΠΊ auto ΠΈΠ»ΠΈ scroll Π²Π΅Π΄ΡƒΡ‚ сСбя словно Ρƒ Π½ΠΈΡ… Π·Π°Π΄Π°Π½ΠΎ position: fixed.

Internet Explorer 8:

  • Π‘ΠΎΡ‡Π΅Ρ‚Π°Π½ΠΈΠ΅ overflow со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ scroll со свойствами max-height ΠΈ float ΠΌΠΎΠΆΠ΅Ρ‚ привСсти ΠΊ ΠΏΡ€ΠΎΠΏΠ°Π΄Π°Π½ΠΈΡŽ элСмСнтов Π²Π΅Π±-страницы, Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ выводится пустой экран.
  • Для Π±Π»ΠΎΠΊΠ°, Ρƒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΡƒΠΊΠ°Π·Π°Π½Ρ‹ свойства float ΠΈ overflow со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ scroll, игнорируСтся ΡˆΠΈΡ€ΠΈΠ½Π°, заданная Ρ‡Π΅Ρ€Π΅Π· свойство max-width.
  • Высота Π±Π»ΠΎΠΊΠ° с Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ полосой ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ увСличиваСтся Π½Π° высоту скролбара, хотя ΠΏΠΎ спСцификации CSS Π·Π°Π΄Π°Π½Π½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π² сСбя ΠΈ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.

Firefox 3.6 Π½Π΅ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ примСняСт overflow ΠΊ Π³Ρ€ΡƒΠΏΠΏΠ°ΠΌ ячССк Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ (<thead>, <tbody>, <tfoot>).

синтаксис, ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ свойств ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ

ΠžΡ‚ Π°Π²Ρ‚ΠΎΡ€Π°: Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ слоТно Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ UX ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π½ΠΈΠΈ страницы, Π½ΠΎ, ΠΊ ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, CSS ΠΌΠΎΠ΄ΡƒΠ»ΡŒ Β«Scroll SnapΒ» Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π² этом. ΠœΠΎΠ΄ΡƒΠ»ΡŒ ΠΏΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ устанавливаСт ΠΊΠΎΠ½Π΅Ρ‡Π½ΡƒΡŽ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ скрола послС выполнСния ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ. Помимо всСго ΠΏΡ€ΠΎΡ‡Π΅Π³ΠΎ, Π² ΠΌΠΎΠ΄ΡƒΠ»Π΅ Π΅ΡΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ управлСния, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΠ°Π½ΠΎΡ€Π°ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² сочСтании с «привязками». ΠœΠΎΠ΄ΡƒΠ»ΡŒ CSS Scroll Snap обСспСчиваСт Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° со скролом. НСдавно W3C выпустили Scroll Snap ΠΊΠ°ΠΊ Candidate Recommendation с Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½Π½Ρ‹ΠΌΠΈ рСализациями ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ с ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π½Ρ‹ΠΌ синтаксисом. Π”Π°Π²Π°ΠΉΡ‚Π΅ Ρ€Π°Π·Π±ΠΈΡ€Π°Ρ‚ΡŒΡΡ.

ВСрминология Scroll Snap

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ ΠΌΠΎΡ‰ΡŒ Scroll Snap ΠΈ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ Π΅Π³ΠΎ Ρ€Π°Π±ΠΎΡ‚Ρ‹, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π½Π°Ρ‚ΡŒ Π΅Π³ΠΎ Ρ‚Π΅Ρ€ΠΌΠΈΠ½ΠΎΠ»ΠΎΠ³ΠΈΡŽ. Π­Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ нСдопонимания ΠΏΡ€ΠΈ использовании Ρ‚Π΅Ρ€ΠΌΠΈΠ½ΠΎΠ² Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅.

Scroll snap ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π²Π½ΡƒΡ‚Ρ€ΠΈ snapport ΠΈΠ»ΠΈ scrollport. Оба Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π° Π·Π½Π°Ρ‡Π°Ρ‚ ΠΎΠ΄Π½ΠΎ ΠΈ Ρ‚ΠΎ ΠΆΠ΅, ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π½Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ скрола. Π­Ρ‚ΠΎ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ scroll snap, ΠΊΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ Π½Π° рисункС Π²Ρ‹ΡˆΠ΅ (внСшняя прСрывистая Ρ€Π°ΠΌΠΊΠ°). Π•Π΅ Ρ†Π΅Π»ΡŒ – ΠΏΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ для scrollport Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° послС Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΈ.

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт snapport называСтся snap area ΠΈ являСтся ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠΌ (-ΠΌΠΈ), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π°ΠΌ ΠΈ Π½ΡƒΠΆΠ½Ρ‹. Π’ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ snap area Π΅ΡΡ‚ΡŒ snap position, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Ρ‚Π°ΠΊΠΆΠ΅ опрСдСляСтся Ρ‡Π΅Ρ€Π΅Π· snap position ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΈ прСдставляСт собой линию ΠΈΠ· красных Ρ‚ΠΎΡ‡Π΅ΠΊ Π½Π° рисункС Π²Ρ‹ΡˆΠ΅.

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

ΠœΡ‹ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ Π² Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°Ρ…, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим ΠΏΠ°Ρ€Ρƒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΈ ΡƒΠ·Π½Π°Π΅ΠΌ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΉ ΠΆΠΈΠ·Π½ΠΈ. Π‘ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ ΠΎ случаях использования ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ·Π½Π°Ρ‚ΡŒ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ W3C с Ρ„ΠΎΡ‚ΠΎΠ³Π°Π»Π΅Ρ€Π΅Π΅ΠΉ ΠΈ Π΄Π΅ΠΌΠΎ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎ ссылкС. Π’Π°ΠΊΠΆΠ΅ обновилась спСцификация Modules August 2017 CR. Π’ :target Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π·Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ довольно интСрСсноС ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅.

Π”Π΅ΠΌΠΎ Scroll Snap

На ΠΌΠΎΠΌΠ΅Π½Ρ‚ написания ΡΡ‚Π°Ρ‚ΡŒΠΈ Π΄Π΅ΠΌΠΎ Π½ΠΈΠΆΠ΅ Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ Π² Safari 11. Π”Ρ€ΡƒΠ³ΠΈΠ΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π½Π΅ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ Π½ΠΎΠ²Ρ‹ΠΉ синтаксис, нСсмотря Π½Π° Π΄Π°Π½Π½Ρ‹Π΅ с caniuse ΠΈ Π»ΠΈΡ‡Π½Ρ‹Π΅ тСсты.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π½ΠΈΠΆΠ΅ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Ρ… свойств для Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ CSS Scroll Snap. Π’ Π½Π΅ΠΌ Π½Π΅Ρ‚ ΠΏΠΎΠ»ΠΈΡ„ΠΈΠ»ΠΎΠ², ΠΌΠ½Π΅ Π½Π΅ ΡƒΠ΄Π°Π»ΠΎΡΡŒ Π½Π°ΠΉΡ‚ΠΈ Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ polyfill, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π» с послСдним ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½Π½Ρ‹ΠΌ синтаксисом. Π’Π°ΠΊΠΆΠ΅ любой скрол ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ ΠΏΠΎΡ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ Π΅Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ извСстноС CSS свойство overflow.

Π”Π΅ΠΌΠΎ Π²Ρ‹ΡˆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ось Π£ Π² качСствС snap position. Однако ΠΌΠΎΠΆΠ½ΠΎ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ось Π₯. Если Ρƒ вас Π½Π΅ установлСн Safari 11, Π½ΠΈΠΆΠ΅ прСдставлСна запись Π΄Π΅ΠΌΠΎ.

ПанСли Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ΡΡ. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Π½Π° страницС Π΅ΡΡ‚ΡŒ опрСдСлСнная Ρ‚ΠΎΡ‡ΠΊΠ°, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΈΠΌΠΏΡƒΠ»ΡŒΡ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π±Π΅Ρ€Π΅Ρ‚ Π²Π΅Ρ€Ρ… ΠΈ ΠΏΠ΅Ρ€Π΅ΠΏΡ€Ρ‹Π³ΠΈΠ²Π°Π΅Ρ‚ ΠΊ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΡƒ Π±Π»ΠΎΠΊΡƒ. Быстро, Π΄Π°? Π’Ρ‚ΠΎΡ€ΠΎΠ΅ Π΄Π΅ΠΌΠΎ, Π³Π΄Π΅ ось Π£ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для ΠΏΠΎΠΊΠ°Π·Π° Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

По ΠΌΠ΅Ρ€Π΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈΠΌΠΏΡƒΠ»ΡŒΡ достигаСт Ρ‚ΠΎΡ‡ΠΊΠΈ Π½Π΅Π²ΠΎΠ·Π²Ρ€Π°Ρ‚Π° scrollport ΠΈ snap area, нСзависимо ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° изобраТСния.

Бвойства ΠΈ синтаксис scroll snap

ΠŸΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ объяснСнию свойств, ΠΈΡ… синтаксиса ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ.

Π’ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ спСцификации scroll snap всСго 4 свойства, ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ³Ρ€Π°Π΅Ρ‚ Π²Π°ΠΆΠ½ΡƒΡŽ Ρ€ΠΎΠ»ΡŒ. Π­Ρ‚ΠΈ 4 свойства…

scroll-snap-type

scroll-snap-align

scroll-padding

scroll-margin

Π Π°Π·Π±Π΅Ρ€Π΅ΠΌ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ свойство, ΠΊΠ°ΠΊ ΠΎΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, Π³Π΄Π΅ опрСдСляСтся ΠΈ ΠΊΠ°ΠΊΠΈΠ΅ значСния ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚.

scroll-snap-type

Π­Ρ‚ΠΎ свойство опрСдСляСт Ρ‚ΠΈΠΏ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° β€” scroll snap container ΠΈΠ»ΠΈ snapport – ΡΡ‚Ρ€ΠΎΠ³ΠΎΡΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡƒΡŽ ось. Если строгоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½Π΅ Π·Π°Π΄Π°Π½ΠΎ, ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ пСрСдаСтся proximity. Бвойство Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‰Π΅Π΅ Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ snap axis. МоТно ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ 2 значСния (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, scroll-snap-type: y mandatory). Π’ Ρ‚Π°ΠΊΠΎΠΌ случаС snap-type касаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ оси Π£ ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ mandatory.

Scroll Snap Axis: x, y, block, inline ΠΈΠ»ΠΈ both

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

x: скрол ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ фиксируСт snap position Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ оси

y: скрол ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ фиксируСт snap position Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ оси

block: скрол ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ фиксируСт snap position Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ оси Π±Π»ΠΎΠΊΠ°

inline: скрол ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ фиксируСт snap position Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ ΠΈΠ½Π»Π°ΠΉΠ½ оси

both: скрол ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ фиксируСт snap position ΠΏΠΎ ΠΎΠ±Π΅ΠΈΠΌ осям нСзависимо (ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΈΠ²ΡΠ·Ρ‹Π²Π°ΡΡΡŒ ΠΊ Ρ€Π°Π·Π½Ρ‹ΠΌ элСмСнтам ΠΊΠ°ΠΆΠ΄ΠΎΠΉ оси)

Scroll Snap Strictness: none, proximity ΠΈ mandatory

none: Ссли Π·Π°Π΄Π°Π½ Π½Π° скрол ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅, Ρ‚ΠΎ скрол ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Π½Π΅ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ

proximity: Ссли Π·Π°Π΄Π°Π½ Π½Π° скрол ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅, Ρ‚ΠΎ скрол ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ привязан ΠΊ snap position, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π½Π΅Ρ‚ Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ. Если доступная snap position сущСствуСт, Ρ‚ΠΎΠ³Π΄Π° скрол ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒΡΡ ΠΏΠΎ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ (Ссли ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Π½Π΅Ρ‚, ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚)

mandatory: Ссли Π·Π°Π΄Π°Π½ Π½Π° скрол ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅, скрол ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ²ΡΠ·Ρ‹Π²Π°Ρ‚ΡŒΡΡ ΠΊ snap position Π² ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ

scroll-snap-align

Бвойство scroll-snap-align Π·Π°Π΄Π°Π΅Ρ‚ snap position ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, ΠΊΠ°ΠΊ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π΅Π³ΠΎ snap area (ΠΊΠ°ΠΊ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ выравнивания) Π²Π½ΡƒΡ‚Ρ€ΠΈ snapport ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° (ΠΊΠ°ΠΊ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ выравнивания). Π”Π²Π° значСния ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ привязки ΠΏΠΎ ΠΈΠ½Π»Π°ΠΉΠ½ оси ΠΈ Π±Π»ΠΎΠΊΠΎΠ²ΠΎΠΉ оси соотвСтствСнно. Если Π·Π°Π΄Π°Π½ΠΎ ΠΎΠ΄Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Π²Ρ‚ΠΎΡ€ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ дублируСтся. ΠŸΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅ΠΌΡ‹Π΅ значСния none, center, start ΠΈ end.

Π­Ρ‚ΠΎ свойство опрСдСляСтся для Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… элСмСнтов скрол ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΈ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ 2 значСния. ΠŸΠ΅Ρ€Π²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ – ось Π₯, Π²Ρ‚ΠΎΡ€ΠΎΠ΅ – ось Π£. НапримСр, scroll-snap-align: start center.

None: Ρ‚Π°ΠΊΠΎΠΉ Π±Π»ΠΎΠΊ Π½Π΅ опрСдСляСт snap position ΠΏΠΎ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ оси.

Start: Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ snap area скрола Π±Π»ΠΎΠΊΠ° Π²Π½ΡƒΡ‚Ρ€ΠΈ snapport ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° – это snap position ΠΏΠΎ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ оси

End: ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ snap area скрола Π±Π»ΠΎΠΊΠ° Π²Π½ΡƒΡ‚Ρ€ΠΈ snapport ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° – это snap position ΠΏΠΎ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ оси

Center: Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ snap area скрола Π±Π»ΠΎΠΊΠ° Π²Π½ΡƒΡ‚Ρ€ΠΈ snapport ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° – это snap position ΠΏΠΎ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ оси

scroll-padding

ЗначСния scroll-padding Π²Π΅Π΄ΡƒΡ‚ сСбя ΠΊΠ°ΠΊ сдвиги. Когда ΠΎΠ½ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹, Ρƒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ΡΡ прокручиваСмая ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, ΡΡ‡ΠΈΡ‚Π°ΡŽΡ‰Π°ΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ. Бвойство Π½Π΅ влияСт Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚, ΠΎΠ±Π»Π°ΡΡ‚ΡŒ скрола, Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π½Π° Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ элСмСнта. БущСствуСт 2 Ρ„ΠΎΡ€ΠΌΡ‹: пСрвая ΠΏΠΎΡ…ΠΎΠΆΠ° Π½Π° стандартноС свойство padding, ΠΈ длинная вСрсия scroll-padding-top ΠΈ scroll-padding-bottom, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€.

scroll-margin

Π­Ρ‚ΠΈ значСния ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ собой внСшниС выраТСния, ΠΎΠ±ΡŠΡΠ²Π»Π΅Π½Π½Ρ‹Π΅ для скрол ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ snap area, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡƒΡŽ для привязки элСмСнтов ΠΊ snapport. Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΊΠ°ΠΊ свойство margin, ΠΊΠ°ΠΊ сокращСнная Ρ‚Π°ΠΊ ΠΈ длинная вСрсия scroll-margin-top ΠΈ scroll-margin-bottom.

Π—Π°ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ мысли

ПослСдниС обновлСния Π² editor’s draft ΠΏΡ€ΠΈΠ²Π΅Π»ΠΈ ΠΊ ΡƒΡ…ΡƒΠ΄ΡˆΠ΅Π½ΠΈΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ, Π½Π° Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚, ΠΊΠ°ΠΊ я ΡƒΠΆΠ΅ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ», Π½Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‡ΠΈΡ… ΠΏΠΎΠ»ΠΈΡ„ΠΈΠ»ΠΎΠ². Π•ΡΡ‚ΡŒ Π²Π΅Ρ€ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ свойство scroll-snap-stop Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠ΄Π°Π»Π΅Π½ΠΎ Π² CR. Π― Ρ‚Π°ΠΊΠΆΠ΅ выяснил, Ρ‡Ρ‚ΠΎ min-height сСйчас Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, ΠΊΠΎΠ³Π΄Π° Π·Π°Π΄Π°Π½ΠΎ Π½Π° scroll snap ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅. ΠœΠΎΠΆΠ΅Ρ‚, Π΅ΡΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ свойства со схоТим дСйствиСм. Если Π·Π½Π°Π΅Ρ‚Π΅ Ρ‚Π°ΠΊΠΈΠ΅, оставляйтС ΠΈΡ… Π² коммСнтариях.

Π­Ρ‚ΠΎ Π±Π΅Π³Π»Ρ‹ΠΉ ΠΎΠ±Π·ΠΎΡ€ CSS Scroll snap. Π‘Ρ‚ΠΎΠΈΡ‚ ΠΎΠ½ΠΎ Ρ‚ΠΎΠ³ΠΎ? Π‘ΡƒΠ΄Π΅Ρ‚ ΠΎΠ½ Π²Π°ΠΌ ΠΏΠΎΠ»Π΅Π·Π΅Π½? Или Π΅Π³ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π² самыС Ρ‚Π΅ΠΌΠ½Ρ‹Π΅ ΡƒΠ³ΠΎΠ»ΠΊΠΈ Π³Π°Π»Π°ΠΊΡ‚ΠΈΠΊΠΈ, Π³Π΄Π΅ Π΅Π³ΠΎ Π½ΠΈΠΊΡ‚ΠΎ Π½Π΅ Π½Π°ΠΉΠ΄Π΅Ρ‚? ΠžΡΡ‚Π°Π²Π»ΡΠΉΡ‚Π΅ ΠΎΡ‚Π²Π΅Ρ‚Ρ‹ Π² коммСнтариях. И ΠΊΠ°ΠΊ всСгда, Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΠΎΠΊΠΎΠ΄ΠΈΡ‚ΡŒ!

Автор: Dennis Gaebel

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: https://webdesign.tutsplus.com/

РСдакция: Команда webformyself.

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

PSD to HTML

ΠŸΡ€Π°ΠΊΡ‚ΠΈΠΊΠ° вСрстки сайта Π½Π° CSS Grid с нуля

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ

HTML-ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ°

ПолС ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ HTML — это ΠΏΠΎΠ»Π΅, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, ΠΊΠΎΠ³Π΄Π° Π΅Π³ΠΎ содСрТимоС слишком Π²Π΅Π»ΠΈΠΊΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒΡΡ Π² ΠΏΠΎΠ»Π΅. Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠΎΡ€ΠΎΠ±ΠΊΡƒ? Π’Ρ‹ создаСтС ΠΏΠΎΠ»Π΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ элСмСнт HTML (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, элСмСнт div ). Π—Π°Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΊΠ½ΠΎ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π»ΠΎΡΡŒ, Π²Ρ‹ примСняСтС свойство CSS overflow ΠΊ div.

Но Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡ‚ΡŒΡΡ ΠΎ тСхничСских дСталях, Ссли Π²Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ просто ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ HTML.ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ значСния ΠΏΠΎ своСму ΡƒΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ€Π°Π·ΠΌΠ΅Ρ€ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, Ρ†Π²Π΅Ρ‚ ΠΈ Ρ‚. Π”.)

ΠŸΡ€ΠΎΡΡ‚Π°Ρ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° HTML

Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² этом ΠΏΠΎΠ»Π΅ Π±ΡƒΠ΄Π΅Ρ‚ достаточно тСкста, Π² Π½Π΅ΠΌ появятся полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ… Π²ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΌΡ‹ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌ это ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΎΠΌ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ! Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΏΠΎΠ»Π΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.

ΠšΠΎΡ€ΠΎΠ±ΠΊΠΈ для Ρ†Π²Π΅Ρ‚Π½Ρ‹Ρ… свитков

Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ поля ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ HTML с Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ.Π£ вас Π΅ΡΡ‚ΡŒ нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² добавлСния Ρ†Π²Π΅Ρ‚Π° Π² ΠΏΠΎΠ»Π΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ссылку, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Π² поля ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ!

Π­Ρ‚ΠΎ ΠΏΠΎΠ»Π΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ HTML ΠΈΠΌΠ΅Π΅Ρ‚ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚.Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΊ Ρ„ΠΎΠ½Ρƒ ΠΎΠΊΠ½Π° ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΊ полосам ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.

Π‘ΠΎΠ»ΡŒΡˆΠ΅ Ρ†Π²Π΅Ρ‚Π½Ρ‹Ρ… свитков β†’

Π˜Π½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ WebKit для настройки полос ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.Π’Π°ΠΊΠΆΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с полосами ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° (Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ просмотр ).




Мой ΠΏΡ€ΠΈΠΌΠ΅Ρ€


<ΡΡ‚ΠΈΠ»ΡŒ>
/ * ΠŸΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ установка полос ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² ΠΎΠΊΠ½ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° * /
body {
ниТняя ΠΌΠ°Ρ€ΠΆΠ°: 200%;
}

/ * Π‘Ρ‚ΠΈΠ»ΠΈ боксов * /
.myBox {
Π³Ρ€Π°Π½ΠΈΡ†Π°: Π½Π΅Ρ‚;
отступ: 5 пиксСлСй;
ΡˆΡ€ΠΈΡ„Ρ‚: 24px / 36px Π±Π΅Π· засСчСк;
ΡˆΠΈΡ€ΠΈΠ½Π°: 200 пиксСлСй;
высота: 200 пиксСлСй;
ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ°;
}

/ * Π‘Ρ‚ΠΈΠ»ΠΈ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ * /
:: — webkit-scrollbar {
ΡˆΠΈΡ€ΠΈΠ½Π°: 12 пиксСлСй;
высота: 12 пиксСлСй;
}

:: — webkit-scrollbar-track {
Π³Ρ€Π°Π½ΠΈΡ†Π°: сплошная ΠΆΠ΅Π»Ρ‚ΠΎ-зСлСная 1px;
радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: 10 пиксСлСй;
}

:: — webkit-scrollbar-thumb {
Ρ„ΠΎΠ½: ΠΆΠ΅Π»Ρ‚ΠΎ-Π·Π΅Π»Π΅Π½Ρ‹ΠΉ;
радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: 10 пиксСлСй;
}

:: — webkit-scrollbar-thumb: hover {
Ρ„ΠΎΠ½: # 88ba1c;
}


ЭффСктивная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° кросс-ΠΌΠ΅Π΄ΠΈΠ° ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π±Π΅Π· Ρ„Π»ΠΎΠΊΡ†ΠΈΠ½ΠΈΠ³ΠΈΠ»ΠΈΠΏΠΈΠ»ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ кросс-ΠΌΠ΅Π΄ΠΈΠ°.Быстро максимизируйтС своСврСмСнныС Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ для ΠΏΠΎΠ»Π½ΠΎΠΌΠΎΡ‡Π½Ρ‹Ρ… схСм Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.


Π‘ΠΎΠ»ΡŒΡˆΠ΅ настраиваСмых полос ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ β†’

ΠŸΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° с изобраТСниями

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ изобраТСния Π² полосу ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π»ΠΈΠ±ΠΎ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π»ΠΈΠ±ΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ»ΠΈ нСсколько ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠ΅Ρ€Π΅Π΄Π½Π΅Π³ΠΎ ΠΏΠ»Π°Π½Π°. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ссылку, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ изобраТСния Π² полосу ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ!

 ΠŸΡ€ΠΈΠΌΠ΅Ρ€ изобраТСния для поля ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ β†’

Π“Ρ€Π°Π½ΠΈΡ†Ρ‹ Ρ€Π°ΠΌΠΊΠΈ для свитка

Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ поля ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ HTML с Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½ΠΎΠΉ Ρ€Π°ΠΌΠΊΠΎΠΉ.Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ссылку, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ€Π°ΠΌΠΊΡƒ ΠΊ полосС ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ!

К этому полю ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π° ​​граница. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΊ Ρ‡Π΅ΠΌΡƒ ΡƒΠ³ΠΎΠ΄Π½ΠΎ Π² HTML, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ поля ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ поля ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ β†’

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ°

Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ поля ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ HTML Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ссылку, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΡƒΡŽ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ Π² ΠΏΠΎΠ»Π΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ!

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ overflow-x, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, ΠΊΠΎΠ³Π΄Π° содСрТимоС этого div ΡˆΠΈΡ€Π΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.Если ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ для этого Π°Π±Π·Π°Ρ†Π° Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 200 ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ΠΎΠ², ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π° 200 ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ΠΎΠ² ΡˆΠΈΡ€Π΅, Ρ‡Π΅ΠΌ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Ρ‚ ΠΊ ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡŽ.

Π‘ΠΎΠ»ΡŒΡˆΠ΅ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ β†’

.

css — ΠŸΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΈΡ‚Π΅ Π΄ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ элСмСнта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ html

ΠŸΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ стСка

  1. Около
  2. ΠŸΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρ‹

  3. Для ΠΊΠΎΠΌΠ°Π½Π΄
  1. ΠŸΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ стСка
    ΠžΠ±Ρ‰Π΅ΡΡ‚Π²Π΅Π½Π½Ρ‹Π΅ вопросы ΠΈ ΠΎΡ‚Π²Π΅Ρ‚Ρ‹

  2. ΠŸΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ стСка для ΠΊΠΎΠΌΠ°Π½Π΄
    Π“Π΄Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΈ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈ дСлятся частными знаниями с ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌΠΈ

  3. Вакансии
    ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ связанныС с Π½ΠΈΠΌ тСхничСскиС возмоТности ΠΊΠ°Ρ€ΡŒΠ΅Ρ€Π½ΠΎΠ³ΠΎ роста

  4. Π’Π°Π»Π°Π½Ρ‚
    НанимайтС тСхничСских спСциалистов ΠΈ создавайтС свой Π±Ρ€Π΅Π½Π΄ работодатСля

  5. Π Π΅ΠΊΠ»Π°ΠΌΠ°
    ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ΡΡŒ ΠΊ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΠΈ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³Π°ΠΌ со всСго ΠΌΠΈΡ€Π°

  6. О компании

.

css — Как ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ полосу ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ html

ΠŸΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ стСка

  1. Около
  2. ΠŸΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρ‹

  3. Для ΠΊΠΎΠΌΠ°Π½Π΄
  1. ΠŸΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ стСка
    ΠžΠ±Ρ‰Π΅ΡΡ‚Π²Π΅Π½Π½Ρ‹Π΅ вопросы ΠΈ ΠΎΡ‚Π²Π΅Ρ‚Ρ‹

  2. ΠŸΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ стСка для ΠΊΠΎΠΌΠ°Π½Π΄
    Π“Π΄Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΈ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈ дСлятся частными знаниями с ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌΠΈ

  3. Вакансии
    ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ связанныС с Π½ΠΈΠΌ тСхничСскиС возмоТности ΠΊΠ°Ρ€ΡŒΠ΅Ρ€Π½ΠΎΠ³ΠΎ роста

  4. Π’Π°Π»Π°Π½Ρ‚
    НанимайтС тСхничСских спСциалистов ΠΈ создавайтС свой Π±Ρ€Π΅Π½Π΄ работодатСля

  5. Π Π΅ΠΊΠ»Π°ΠΌΠ°
    ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ΡΡŒ ΠΊ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΠΈ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³Π°ΠΌ со всСго ΠΌΠΈΡ€Π°

  6. О компании

Загрузка…

.

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

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • Mert Cukuren
БдСлано с
  • HTML / CSS (SCSS) / JavaScript (Babel)
О кодС

ΠŸΡ€ΠΎΡΡ‚Π°Ρ анимация ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ

ΠŸΡ€ΠΎΡΡ‚Π°Ρ анимация ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² HTML, CSS ΠΈ JS.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • Π”Ρ€ΠΎΠ½ΠΊΠ° Π Π°ΡƒΠ»ΡŒ
БдСлано с
  • HTML / CSS (SCSS) / JavaScript (Babel)
О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ пСрСкоса

Π­Ρ„Ρ„Π΅ΠΊΡ‚ пСрСкоса ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² HTML, CSS ΠΈ JS.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • magnificode
БдСлано с
  • HTML / CSS (SCSS) / JavaScript (Babel)
О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Ρ„ΠΎΠ½Π° ΠΈ тСкста

Π‘ΡƒΠΏΠ΅Ρ€ быстрая идСя для эффСкта отобраТСния тСкста ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Firefox, Opera, Safari

Адаптивный: Π½Π΅Ρ‚

Зависимости: —

О кодС

Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ

Π€ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ адаптируСтся ΠΊ полоТСнию ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • ΠšΠ²Π΅Π½Ρ‚ΠΈΠ½ Π’Π΅Ρ€ΠΎΠ½
О кодС

ΠŸΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° ΠΎΠ΄Π½ΠΎΠΉ страницы

ΠŸΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° ΠΎΠ΄Π½ΠΎΠΉ страницы.Ни ΠΎΠ΄Π½ΠΎΠΉ строчки JavaScript!

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

БдСлано с
  • HTML (мопс) / CSS (SCSS) / JavaScript (Babel)
О кодС

ΠΠ°Π±Π»ΡŽΠ΄Π°Ρ‚Π΅Π»ΡŒ Π·Π° пСрСкрСстком

API, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для понимания видимости ΠΈ полоТСния элСмСнтов DOM ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ содСрТащСго элСмСнта ΠΈΠ»ΠΈ области просмотра Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ уровня.ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ доставляСтся асинхронно ΠΈ ΠΏΠΎΠ»Π΅Π·Π½Π° для понимания видимости элСмСнтов ΠΈ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈ ΠΎΡ‚Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ содСрТимого DOM.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

О кодС

Половина ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ

Половина ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π½Π° чистом CSS.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

О кодС

ИзмСнСниС Ρ„ΠΎΠ½Π° CSS ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅

Ѐиксированный элСмСнт мСняСт Ρ†Π²Π΅Ρ‚ ΠΏΡ€ΠΈ Π²Ρ…ΠΎΠ΄Π΅ Π² Ρ€Π°Π·Π½Ρ‹Π΅ сСкции.Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π΄ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ элСмСнты для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ€Π°Π·Π΄Π΅Π»Π°. Π’Π΅ΠΏΠ΅Ρ€ΡŒ с Ρ€Π΅ΠΆΠΈΠΌΠΎΠΌ налоТСния магия для Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ эффСкта.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: Π½Π΅Ρ‚

Зависимости: —

.

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *