Полосы прокрутки в элементе и горизонтальная прокрутка для длинной строки

То и другое легко сделать с помощью CSS-свойства overflow.

В первом случае достаточно создать стилевой класс (назовём его slider), у которого будут установлены нужные свойства и заключить прокручиваемое содержимое в раздел с классом этого стиля.

<style>
.slider {
 overflow: auto;
 margin: 0 auto;
 width: 400px;
 height: 400px;
}
</style>
<div class="slider">
 <img src="http://blog.kislenko.net/pictures/10945.png" alt="Картинка">
</div>

Этот код в работе:

Во втором случае практичнее сделать класс-обёртку parent, который установит горизонтальную прокрутку, а прокручиваемое содержимое дополнительно заключить в раздел со стилем child, в котором установлено свойство display, например:

<style>
.parent {
 width: 90%;
 margin: 0 auto;
 overflow: hidden;
 overflow-x: scroll;
 white-space: nowrap;
}
.child {
 display: inline-block;
}
</style>

<div class="parent">
 <div class="child">
Содержимое, к которому будет добавлена горизонтальная прокрутка. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Phasellus condimentum iaculis nisl vel tincidunt. 
Pellentesque lacinia mi ac ullamcorper convallis. 
Integer aliquet nisi sit amet magna vestibulum, eu bibendum turpis lacinia. 
Nunc lorem nunc, feugiat sed metus id, tempus facilisis mi. Integer dolor tellus, 
porttitor tincidunt facilisis non, euismod eu erat. Aliquam sodales nisl risus, 
id blandit mauris accumsan in. Curabitur rutrum maximus congue. 
Duis sed orci ac lorem varius dictum. Nullam rhoncus viverra feugiat. 
 </div>
</div>

Чтобы не "рвало макет", не нужно это вставлять в ячейки таблиц td. Но даже при этом условии поддержка стиля не универсальна, например, старые браузеры на Android 1-3 версий могут стили из статьи проигнорировать.

27.10.2019, 10:29 [1294 просмотра]