no-prof
Условия использования:
Вы можете использовать все материалы, соблюдая условия использования бесплатного контента.
В последнее время многие пользователи спрашивают, как поставить и стилизовать прокрутку. Чтобы сэкономить время и им и нам, я выкладываю подробную инструкцию по прокрутке.
Прокрутка для отдельного блока
Для начала решите, куда Вы будете ставить прокрутку. Это не так важно, но если Вы хотите вставить в таблицу, немаловажно куда в код таблицы Вы впихнете прокрутку. Если куда-нибудь в середину - и таблица и прокрутка, все будет наперекосяк. Так что делаем вот что: в таблице ищите контент, который хотите поставить в прокрутку. Потом в начале и в конце текста ставьте нижеприведенные теги.
<div style="width: 100px; height: 100px; overflow-y: scroll;">ВАШ КОНТЕНТ</div>
Красное - ширина прокрчиваемой области.
Синее - высота.
Розовое - ось прокрутки. y - вертикально, x - горизонтально.
Зеленое - то, что должно прокручиваться, непосредственно, Ваш текст.
Если у блока есть класс, то так ещё проще:
CSS | HTML |
Код: .scroller {
width: 300px;
height: 100px;
overflow-y: scroll;} | Код: <div class="scroller"> Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. </div> |
Но можно еще сделать полосу прокрутки стилизованной. Сейчас она будет такой же, как прокрутка в браузере, т.е. соответствующей теме в Windows (или других ОС). А можно сделать так, чтобы она была одного цвета независимо от темы и браузера. Об этом читайте ниже.
Стилизация полосы прокрутки
В браузерах WebKit (Chrome, Edge, Safari, Opera) поддерживаются ::-webkit-scrollbar псевдо-элементы и это позволяет стилизовать полосу прокрутки:
::-webkit-scrollbar полоса прокрутки
::-webkit-scrollbar-button кнопки на полосе прокрутки (стрелки, указывающие вверх и вниз).
::-webkit-scrollbar-thumb Перетаскивание маркера прокрутки.
::-webkit-scrollbar-track дорожка (индикатор выполнения) полосы прокрутки.
::-webkit-scrollbar-track-piece дорожка (индикатор выполнения) не покрывается ручкой.
::-webkit-scrollbar-corner нижний угол полосы прокрутки, где встречаются как горизонтальные, так и veritcal полосы прокрутки.
::-webkit-resizer Перетаскивание маркера изменения размера, который отображается в нижнем углу некоторых элементов.
Пример CSS-кода стилизации прокрутки на всём сайте:
body::-webkit-scrollbar {
width: 12px; /* ширина всей полосы прокрутки */
}
body::-webkit-scrollbar-track {
background: orange; /* цвет зоны отслеживания */
}
body::-webkit-scrollbar-thumb {
background-color: blue; /* цвет бегунка */
border-radius: 20px; /* округлось бегунка */
border: 3px solid orange; /* отступ вокруг бегунка */
}Для браузеров Blink (Firefox) используются CSS Scrollbars.
Значений там немного scrollbar-width и scrollbar-color.
Пример CSS-кода стилизации прокрутки на всём сайте:
body {
scrollbar-width: thin; /* "auto" или "thin" */
scrollbar-color: blue orange; /* цвет бегунка и зоны отслеживания */
}Кроссбраузерно полоса прокрутки настраивается указанием значений для обоих типов браузера, ибо браузеры Blink и WebKit будут игнорировать правила, которые они не распознают.
Пример CSS-кода стилизации прокрутки на всём сайте:
/* Работает в Firefox */
* {
scrollbar-width: thin;
scrollbar-color: blue orange;
}
/* Работает в Chrome, Edge и Safari */
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-track {
background: orange;
}
*::-webkit-scrollbar-thumb {
background-color: blue;
border-radius: 20px;
border: 3px solid orange;
}Значения взяты отсюда и отсюда.
Отредактировано faiko (20.08.11 19:47)
