Как создать 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; /* свойство для прокрутки по горизонтали. Автоматом, если больше блока */
}
prokrutka {Принудительная установка прокрутки в блоке 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>
</style>
.
height: 200px; /* высота нашего блока */
width: 200px; /* ширина нашего блока */
background: #fff; /* цвет фона, белый */
border: 1px solid #C1C1C1; /* размер и цвет границы блока */
overflow-x: scroll; /* прокрутка по горизонтали */
overflow-y: scroll; /* прокрутка по вертикали */
}</head>
<body>
<div class="prokrutka">
А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации.
</div>
</body>
</html>
prokrutka {
Одно из свойств overflow можно убрать, тогда останется прокрутка только по одной оси, чего вполне достаточно.
Посмотреть работу скрипта на примере ниже.
Можно указать принудительную прокрутку только для одной оси. Для этого соответственно уберите строку либо с overflow-x, либо с overflow-y.
Спасибо за внимание! Надеюсь статья была полезна!
html — div блок с прокруткой
Задать вопрос
Вопрос задан
Изменён 5 лет 8 месяцев назад
Просмотрен 578 раз
Футер и хедер должны быть всегда статичны, а высота дивов регулироваться автоматически, в зависимости от высоты окна. Как можно решить эту проблему?
.
wrapper {
overflow: scroll;
height: 100%;
overflow-x: hidden;
}
.main {
display: flex;
height: 100%;
margin: 0% 10%;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
}
header {
background-color: gray;
}
footer {
background-color: gray;
height: 12px;
}
li {
padding: 20px;
}<body>
<div>
<div>
<header> Text
<div> 1 </div>
</header>
<div>
<ul>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
</li>
</ul>
</div>
<footer> </footer>
</div>
<div>
<header> Text</header>
<div>
<ul>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
</ul>
</div>
<footer>
</footer>
</div>
</div>
</body> 
И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
- html
- css
1
Например, так:
.wrapper {
overflow: scroll;
height: 100%;
overflow-x: hidden;
flex: 1 0;
}
.main {
display: flex;
height: 100%;
margin: 0% 10%;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
}
header {
background-color: gray;
}
footer {
background-color: gray;
height: 12px;
}
li {
padding: 20px;
}
. container {
display: flex;
flex-direction: column;
}
<div>
<div>
<header> Text
<div> 1 </div>
</header>
<div>
<ul>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
</li>
</ul>
</div>
<footer> </footer>
</div>
<div>
<header> Text</header>
<div>
<ul>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
</ul>
</div>
<footer>
</footer>
</div>
</div>
</li>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
</li>
</ul>
</div>
<footer> </footer>
</div>
<div>
<header> Text</header>
<div>
<ul>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы.
И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
</ul>
</div>
<footer>
</footer>
</div>
</div>3
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
. wrapper {
height: 100%;
overflow: auto;
}
.main {
display: flex;
height: 100%;
margin: 0% 10%;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
}
header {
background-color: gray;
}
footer {
background-color: gray;
height: 12px;
}
li {
padding: 20px;
}
wrapper {
height: 100%;
overflow: auto;
}
.main {
display: flex;
height: 100%;
margin: 0% 10%;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
}
header {
background-color: gray;
}
footer {
background-color: gray;
height: 12px;
}
li {
padding: 20px;
}<body>
<div>
<div>
<header> Text
<div> 1 </div>
</header>
<div>
<ul>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
</li>
</ul>
</div>
<footer> </footer>
</div>
<div>
<header> Text</header>
<div>
<ul>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
</ul>
</div>
<footer>
</footer>
</div>
</div>
</body>
</li>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
</li>
</ul>
</div>
<footer> </footer>
</div>
<div>
<header> Text</header>
<div>
<ul>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы.
И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
</ul>
</div>
<footer>
</footer>
</div>
</div>
</body>Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Как настроить вертикальную прокрутку внутри блока div — HTML и CSS — Форумы SitePoint
codeispoetry 1
Live Link
Я попробовал это →
overflow-y: auto; высота: 100 пикселей;
Цель: я хочу установить вертикальную прокрутку на левой боковой панели с содержимым.
Рэй.Х 2
Вы ищете scroll при использовании фиксированной высоты
overflow-y: scroll;
1 Нравится
Миттиниг 3
Что-то не так с сайтом codepen, не вижу где и как вносить правки.
1 Нравится
4
Луч.Г:
переполнение-у: прокрутка;
Я пробовал и с этим, но он тоже не смог создать вертикальную прокрутку.
Рэй.Х 5
Попробуйте просто использовать
переполнение: прокрутка;
РЕДАКТИРОВАТЬ:
Нет, это дает полосы прокрутки в каждом направлении
1 Нравится
6
Луч.H:
переполнение: прокрутка;
Я пробовал, но это также создает горизонтальную прокрутку, которая не нужна.
кодовая поэзия 7
Миттино:
Что-то не так с сайтом codepen, не вижу где и как вносить правки.
Я в хроме и могу перейти к «проверить элемент»
Ray.H 8
Если вы установите минимальную ширину, она должна работать с overflow-y
overflow-y: scroll; минимальная ширина: 200 пикселей; высота: 200 пикселей;
1 Нравится
9
Луч.H:
переполнение-у: прокрутка;
минимальная ширина: 200 пикселей;
высота: 200 пикселей;
Я пробовал это:
максимальная высота: 150 пикселей;
переполнение-у: прокрутка;
это сработало, но полосы прокрутки не было видно. хотя при движении колесика мыши содержимое прокручивалось вертикально.
Веб-машина 10
Я заставил его работать с:
overflow-y: auto; высота: 100 пикселей;
Я также использую его на одном из своих сайтов, и он работает хорошо.
1 Нравится
Миттиниг 11
Является ли элемент, которому вы хотите присвоить полосы прокрутки, блочным?
developer.mozilla.orgoverflow-y — CSS: каскадные таблицы стилей | МДН
CSS-свойство overflow-y устанавливает, что будет отображаться, когда содержимое выходит за пределы верхнего и нижнего края блочного элемента. Это может быть ничего, полоса прокрутки или содержимое переполнения.
Применяется к незаменяемые элементы блочного уровня и незаменяемые элементы встроенного блока
Веб-машина 12
Я использую его на .sidebar , и он соответствующим образом изменился в codepen.
1 Нравится
Ray.H 13
При уменьшении ширины окна просмотра вы получите горизонтальную полосу прокрутки без минимальной ширины.
Он использует flex
1 Нравится
14
Привет, codeispoetry,
попробуй так…
<голова>
<стиль медиа="экран">
тело {
цвет фона: #f0f0f0;
шрифт: 1em/150% verdana, arial, Helvetica, без засечек;
}
#коробка {
максимальная ширина: 20em;
высота: 20см;
набивка: 1em;
маржа: авто;
граница: 0.062em сплошная #999;
цвет фона: #fff;
переполнение: авто;
направление: rtl;
выравнивание текста: по левому краю;
}
<тело>
<дел>
<р>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur sit amet sem sed libero bibendum tempus faucibus
quis mi. Nulla rhoncus vel ipsum in volutpat. Нам Тортор
nibh, posuere ac lorem ut, suscipit tincidunt leo. Дуис
interdum justo ac justo vehicula consequat. Курабитур и др.
волюпат нибх. Phasellus rutrum lacus at dolor placerat
фегиат. Morbi porta, sapien nec molestie molestie, odio
magna vestibulum lorem, vitae feugiat est leo sit amet
нунк. Curabitur ornare tempor turpis. В нибх сем, порт ак
magna sed, pretium commodo odio. Sed porttitor augue velit,
quis placerat diam sodales ac. Curabitur vitae porta ex.
Praesent rutrum ex fringilla tellus tincidunt interdum.
Proin molestie lectus consectetur purus aliquam porttitor.
Fusce ac nisi ac magna scelerisque finibus a vitae sem.
Curabitur sit amet sem sed libero bibendum tempus faucibus
quis mi. Nulla rhoncus vel ipsum in volutpat. Нам Тортор
nibh, posuere ac lorem ut, suscipit tincidunt leo. Дуис
interdum justo ac justo vehicula consequat. Курабитур и др.
волюпат нибх. Phasellus rutrum lacus at dolor placerat
фегиат. Morbi porta, sapien nec molestie molestie, odio
magna vestibulum lorem, vitae feugiat est leo sit amet
нунк. Curabitur ornare tempor turpis. В нибх сем, порт ак
magna sed, pretium commodo odio. Sed porttitor augue velit,
quis placerat diam sodales ac. Curabitur vitae porta ex.
Praesent rutrum ex fringilla tellus tincidunt interdum.
Proin molestie lectus consectetur purus aliquam porttitor.
Fusce ac nisi ac magna scelerisque finibus a vitae sem.
головка
1 Нравится
15
Веб-машина:
Я использую его на .sidebar, и он соответствующим образом изменился в codepen.
Да, работает.
кодпоэзия 16
головка:
максимальная ширина: 20em;
высота: 20см;
набивка: 1em;
поле: авто;
граница: 0.062em сплошная #999;
цвет фона: #fff;
переполнение: авто;
направление: rtl;
выравнивание текста: по левому краю;
Это тоже сработало. поместить прокрутку влево вот так →
710×529 20,9 КБ
#Обновление:
это исправляет ситуацию →
направление: ltr;
Рэй.Х 17
Пожалуйста, дайте ссылку на ваш обновленный рабочий код
Вы тестировали с уменьшенной шириной окна просмотра?
overflow-y:auto Вводит полосу прокрутки, когда это необходимо
overflow-y:scroll Имеет постоянное положение полосы прокрутки
2 лайка
кодпоэзия 18
Луч.H:
Пожалуйста, дайте ссылку на ваш обновленный рабочий код
Этот
Ray.H 19
я бы еще поставил min-width
Вы получаете нижнюю полосу прокрутки при сужении области просмотра
codeispoetry 20
Луч.H:
Вы получаете нижнюю полосу прокрутки при сужении области просмотра
№
895×754 24,4 КБ
Конечный код, который я использую: →
/*max-width: 20em;*/
максимальная высота: 46em;
/*заполнение: 1em;*/
маржа: авто;
/*граница: 0.062em сплошная #999;*/
цвет фона: #fff;
переполнение-у: авто;
направление: лтр;
выравнивание текста: по левому краю;
Overflow — Tailwind CSS
Основное использование
Отображение содержимого, выходящего за пределы
Используйте overflow-visible , чтобы предотвратить обрезание содержимого внутри элемента. Обратите внимание, что любой контент, выходящий за границы элемента, будет виден.
Эндрю Альфред Технический консультант
Скрытие содержимого, выходящего за пределы
Используйте overflow-hidden , чтобы обрезать любое содержимое внутри элемента, выходящее за границы этого элемента.
Эндрю Альфред Технический консультант
Прокрутка при необходимости
Используйте overflow-auto для добавления полос прокрутки к элементу в случае, если его содержимое выходит за границы этого элемента. В отличие от overflow-scroll , которая всегда показывает полосы прокрутки, эта утилита покажет их только в том случае, если прокрутка необходима.
Эндрю Альфред Технический консультант
Дебра Хьюстон Аналитик
Джейн Уайт Директор по маркетингу
Рэй Флинт Technical Advisor
Горизонтальная прокрутка при необходимости
Используйте overflow-x-auto , чтобы при необходимости разрешить горизонтальную прокрутку.
Эндрю
Эмили
Уитни
Дэвид
Кристин
Сара
Вертикальная прокрутка, если need
Используйте overflow-y-auto , чтобы при необходимости разрешить вертикальную прокрутку.
Эндрю Альфред Технический консультант
Дебра Хьюстон Аналитик
Джейн Уайт Директор по маркетингу
Рэй Флинт Технический советник
Горизонтальная прокрутка всегда
Используйте overflow-x-scroll , чтобы разрешить горизонтальную прокрутку и всегда отображать полосы прокрутки, если только постоянно видимые полосы прокрутки не отключены операционной системой.
Всегда вертикальная прокрутка
Используйте overflow-y-scroll , чтобы разрешить вертикальную прокрутку и всегда отображать полосы прокрутки, если операционная система не отключила постоянно видимые полосы прокрутки.
Прокрутка во всех направлениях
Используйте overflow-scroll , чтобы добавить полосы прокрутки к элементу. В отличие от overflow-auto , которая показывает полосы прокрутки только в случае необходимости, эта утилита показывает их всегда.