Для создания scroll-бара в CSS используется свойство overflow. Свойство overflow управляет тем, что происходит, когда содержимое элемента переполняется относительно заданной высоты и ширины.
Для создания вертикального scroll-бара:
.container {
height: 100px; /* задаем высоту контейнера */
overflow-y: scroll; /* отображаем вертикальный scroll-бар, если содержимое контейнера больше заданной высоты */
}В данном примере контейнеру задается высота 100 пикселей, а свойство overflow-y указывает браузеру, что в случае, если содержимое контейнера окажется больше заданной высоты, нужно отображать вертикальный scroll-бар.
Для создания горизонтального scroll-бара:
.container {
width: 100px; /* задаем ширину контейнера */
overflow-x: scroll; /* отображаем горизонтальный scroll-бар, если содержимое контейнера больше заданной ширины */
}Аналогично, контейнеру с заданной шириной задается свойство overflow-x со значением scroll, которое позволяет отображать горизонтальный scroll-бар при переполнении содержимого контейнера.
Для создания обоих типов scroll-баров:
.container {
height: 100px; /* задаем высоту контейнера */
width: 100px; /* задаем ширину контейнера */
overflow: auto; /* отображаем оба типа scroll-баров, если содержимое контейнера превышает заданные параметры */
}В данном примере для контейнера задаются высота и ширина, а свойство overflow позволяет отображать оба типа scroll-баров при переполнении содержимого контейнера. В случае, если содержимое контейнера не превышает заданные параметры, scroll-бары не будут отображаться.
