Прокрутка CSS

Горизонтальный скроллинг

Содержимое можно ограничить рамками блока HTML благодаря свойству CSS overflow. При этом выступающие элементы будут доступны при перемещении ползунка полосы прокрутки.

посмотреть код

<style>
.scrolling {
 margin: 0 auto;
 width: 30em;
 height: 10em;
 overflow-x: scroll;
 overflow-y: hidden;
 white-space: nowrap;  /* чтобы картинки стояли в одну линию, не переходя на другую строку */
 word-wrap: normal;  /* то же для IE */
}

.scrolling img {
 width: 10em;
 height: 10em;
}
</style>

<div class="scrolling">
  <img src="адрес_изо" alt=""/>
  <img src="адрес_изо" alt=""/>
  <img src="адрес_изо" alt=""/>
  <img src="адрес_изо" alt=""/>
  <img src="адрес_изо" alt=""/>
</div>

На слайдере или галереи изображений часто можно увидеть стрелочки, смещающие блок div с картинками. Когда по нажатию на кнопку одно фото прячется, его место занимает следующее, а позади появляется скрытый рисунок.

посмотреть код

<style>
.element {
 margin: 0 auto;
 width: 30em;
 height: 10em;
 overflow: hidden;
 white-space: nowrap;
 word-wrap: normal;
}

.element img {
 width: 10em;
 height: 10em;
 transition: 999999s;  /* чтобы не дать элементу вернуться в исходное состояние, время обратного смещения очень велико */
}

.left:active ~ .element img, .right:active ~ .element img {transition: 2s linear;}
.left:active ~ .element img {transform: translateX(0);}
.right:active ~ .element img {transform: translateX(-20em);}
</style>

<button class="left">«</button><button class="right">»</button>
<div class="element">
  <img src="адрес_изо" alt=""/>
  <img src="адрес_изо" alt=""/>
  <img src="адрес_изо" alt=""/>
  <img src="адрес_изо" alt=""/>
  <img src="адрес_изо" alt=""/>
</div>

Для того, чтобы плавно прокручивалась вся фотография целиком.

посмотреть код

<style>
[class^="scroll"] {
 position: relative;
 height: 10em;
 line-height: 10em;
 padding: 0 3em;
}
[class^="scroll"] input {
 display: none;
}
[class^="scroll"] div {
 height: 100%;
 overflow: hidden;
 white-space: nowrap;
 word-wrap: normal;
 font-size: 0;
}
[class^="scroll"] img {
 position: relative;
 right: 0em;
 width: 25%;
 height: 100%;
 transition: .5s;
}

[class^="scroll"] label {
 cursor: pointer;
 font-weight: 600;
 font-size: 3em;
}
[class^="scroll"] input:nth-of-type(1):checked ~ label:nth-of-type(2):after,
[class^="scroll"] input:nth-of-type(2):checked ~ label:nth-of-type(3):after,
[class^="scroll"] input:nth-of-type(3):checked ~ label:nth-of-type(4):after,
[class^="scroll"] input:nth-of-type(4):checked ~ label:nth-of-type(5):after,
[class^="scroll"] input:nth-of-type(5):checked ~ label:nth-of-type(6):after,
[class^="scroll"] input:nth-of-type(6):checked ~ label:nth-of-type(7):after {
 content: "\3009";
 position: absolute;
 right: 0;
}
[class^="scroll"] input:nth-of-type(2):checked ~ label:nth-of-type(1):after,
[class^="scroll"] input:nth-of-type(3):checked ~ label:nth-of-type(2):after,
[class^="scroll"] input:nth-of-type(4):checked ~ label:nth-of-type(3):after,
[class^="scroll"] input:nth-of-type(5):checked ~ label:nth-of-type(4):after,
[class^="scroll"] input:nth-of-type(6):checked ~ label:nth-of-type(5):after,
[class^="scroll"] input:nth-of-type(7):checked ~ label:nth-of-type(6):after {
 content: "\3008";
 position: absolute;
 left: 0;
}

[class^="scroll"] input:nth-of-type(2):checked ~ div img {right: 25%;}
[class^="scroll"] input:nth-of-type(3):checked ~ div img {right: 50%;}
[class^="scroll"] input:nth-of-type(4):checked ~ div img {right: 75%;}
[class^="scroll"] input:nth-of-type(5):checked ~ div img {right: 100%;}
[class^="scroll"] input:nth-of-type(6):checked ~ div img {right: 125%;}
[class^="scroll"] input:nth-of-type(7):checked ~ div img {right: 150%;}
</style>

<div class="scroll">

<input type="radio" id="l0" name="raz" checked="checked"/>
<input type="radio" id="l1" name="raz"/>
<input type="radio" id="l2" name="raz"/>
<input type="radio" id="l3" name="raz"/>
<input type="radio" id="l4" name="raz"/>
<input type="radio" id="l5" name="raz"/>
<input type="radio" id="l6" name="raz"/>

<label for="l0"></label>
<label for="l1"></label>
<label for="l2"></label>
<label for="l3"></label>
<label for="l4"></label>
<label for="l5"></label>
<label for="l6"></label>

<div>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
</div>

</div>

Красивый вертикальный скроллинг

Если нет необходимости в скролле, то тень не будет видна. Автор.

• Тени нет сверху.
• 2
• 3
• 4
• 5
• 6
• Начинаем прокручивать блок
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• Конец!
• Тут нет тени снизу.

посмотреть код

<style>
.scrollbox {
 overflow: auto;
 width: 200px;
 max-height: 200px;
 margin: 30px auto;
 background:
  linear-gradient(white 30%, rgba(255,255,255,0)),
  linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
  radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
  radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
 background-repeat: no-repeat;
 background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
 background-attachment: local, local, scroll, scroll;
}
</style>

<div class="scrollbox">
 <ul>
  <li>Тени нет сверху.</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>Начинаем прокручивать блок</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>Конец!</li>
  <li>Тут нет тени снизу.</li>
 </ul>
</div>

• Убрать сдвиг сайта при появлении полосы прокрутки
• Индикаторы HTML
• Индикатор прокрутки CSS
• Увеличение части HTML-картинки при наведении курсора мышки
• CSS слайдер для сайта
• transition CSS
• Что лучше display или visibility?
• CSS transform
• Cелекторы CSS