Как сделать скролл в блоке?
Для полноты реализации лучше использовать overflow для x,y:
или для постоянного скрола
overflow-y: scroll; Отслеживать
ответ дан 18 окт 2018 в 11:16
187 8 8 бронзовых знаков
Нужно в css прописать «overflow: scroll»,также добавить необходимую ширину и высоту блоку.
Отслеживать
ответ дан 17 окт 2018 в 17:10
Алина Касымова Алина Касымова
224 1 1 серебряный знак 6 6 бронзовых знаков
- css
- bootstrap
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как сделать скролл внутри блока css
Для создания блока фиксированного размера с возможностью прокрутки по горизонтали и вертикали необходимо использовать свойство overflow .
Overflow может принимать следующие значения:
- visible: По умолчанию. Содержимое не обрезается, может отображаться снаружи блока, в котором оно расположено.
- hidden: Контент обрезается, без предоставления прокрутки.
- scroll: Содержимое обрезается и браузер использует элементы прокрутки, не важно было ли обрезано содержимое или нет. Это избегает многих проблем касательно появления прокруток и их исчезновения в динамичной среде. Принтеры могут печатать переполненное содержимое.
- auto: Зависит от агента пользователя. Браузеры такие как Firefox предоставляют прокрутку, если содержимое переполняет блок.
Исходный HTML документ:
Пример текста, который будет в блоке с полосами прокрути - как горизонтальной так и вертикальной. Для того что бы ими можно было воспользоваться, добавим д____л____и____н____н____о_____е слово.
div border: 1px solid #000; width: 200px; height: 50px; /* Включаем отображение полос прокрутки по горизонтали и по вертикали */ overflow: auto; padding: 20px; > 
Результат:
Как изменить скролл в блоке?
нужно было сделать так, но будут ли работать данные css свойства для блока?
Отслеживать
задан 9 июл 2018 в 4:03
1,698 2 2 золотых знака 18 18 серебряных знаков 55 55 бронзовых знаков
9 июл 2018 в 4:17
ага. почему-то работает именно если указывать саму ширину скролла, видимо это обязательно) как ответ опубликуйте ваш комментарий))
9 июл 2018 в 4:23
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Без определения стилей для ::-webkit-scrollbar работать не будет.
.filter__checkbox-list < height: 105px; overflow: scroll; overflow-x: hidden; >.filter__checkbox-list::-webkit-scrollbar < background-color: #ddd; border-radius: 8px; width: 7px; overflow: hidden; >.filter__checkbox-list::-webkit-scrollbar-thumb
Отслеживать
ответ дан 9 июл 2018 в 4:15
Nikita Galadiy Nikita Galadiy
1,460 1 1 золотой знак 8 8 серебряных знаков 24 24 бронзовых знака
&::-webkit-scrollbar-thumb (используется препроцессор) = .filter__checkbox-list::-webkit-scrollbar-thumb — эти стили эквивалентны.
9 июл 2018 в 4:16
Знаю, но под рукой не было Less/Sass. Если нужно, исправлю под препроцессор.
9 июл 2018 в 4:21
Необходимо добавить еще ширину скролбара
&::-webkit-scrollbar .filter__checkbox-list < height: 105px; overflow-y: auto; overflow-x: hidden; border: 1px solid #ccc; max-width: 300px; >.filter__checkbox-list label < display: block; padding: 5px; >/* Width */ .filter__checkbox-list::-webkit-scrollbar < width: 6px; >/* Thumb */ .filter__checkbox-list::-webkit-scrollbar-thumb
Отслеживать
ответ дан 9 июл 2018 в 4:32
27.6k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
scroll-behavior
scroll-behavior — CSS-свойство, которое определяет поведение прокрутки для любого элемента на странице. Отрабатывается в момент автоматической прокрутки навигационных элементов, либо CSSOM прокручивается API. Любые другие прокручивания, например, те, которые выполняются пользователем, не затрагиваются этим свойством. Если это свойство указано на корневой элемент, оно относится ко всему viewport пространству.
Юзер-агенты могут игнорировать это свойство.
| Начальное значение | auto |
|---|---|
| Применяется к | прокручиваемые блоки |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | Not animatable |
Синтаксис
/* Ключевые значения */ scroll-behavior: auto; scroll-behavior: smooth; /* Глобальные свойства */ scroll-behavior: inherit; scroll-behavior: initial; scroll-behavior: unset;
Значения
Стандартное поведение прокрутки без эффекта плавности.
Элемент прокручивается плавно; используется функция тайминга, определяемая юзер-агентом через период времени, отмеченный в нем. Юзер-агенты должны следовать соглашениям платформы, если таковые имеются.
Синтаксис
scroll-behavior =
auto | (en-US)
smooth
Пример
HTML
nav> a href="#page-1">1a> a href="#page-2">2a> a href="#page-3">3a> nav> scroll-container> scroll-page id="page-1">1scroll-page> scroll-page id="page-2">2scroll-page> scroll-page id="page-3">3scroll-page> scroll-container>
CSS
a display: inline-block; width: 50px; text-decoration: none; > nav, scroll-container display: block; margin: 0 auto; text-align: center; > nav width: 339px; padding: 5px; border: 1px solid black; > scroll-container display: block; width: 350px; height: 200px; overflow-y: scroll; scroll-behavior: smooth; > scroll-page display: flex; align-items: center; justify-content: center; height: 100%; font-size: 5em; >
Результат
Характеристики
| Specification |
|---|
| CSS Overflow Module Level 3 # smooth-scrolling |
Совместимость с браузерами
BCD tables only load in the browser
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 18 окт. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.