Сделать прокрутку

Подробно о прокрутке в html

1. Прокрутка «переполнения»
2. Прокрутите «переполнение: авто»
3. Прокрутка «переполнение: прокрутка»
4. Используйте горизонтальную или вертикальную прокрутку

Принудительная установка прокрутки в блоке CSS

Вы также можете принудительно прокрутить по высоте и ширине. Для этого каждая ось: overflow-y: scroll; (вертикальный) overflow-x: scroll; (по горизонтали) укажем параметр прокрутки, принудительная прокрутка.
HTML и CSS код
.прокрутка {высота: 150 пикселей; / * высота нашего блока * / background: #fff; / * цвет фона, белый * / border: solid 1px # C1C1C1; / * размер и цвет границы блока * / overflow-x: scroll; / * прокрутка по горизонтали * / overflow-y: scroll; / * прокрутка по вертикали */ }

Метод Flexbox

Как создать раскрывающееся меню с помощью HTML и CSS

Flexbox тоже может с этим справиться.

.scrolling-wrapper-flexbox {дисплей: гибкий; Flex-wrap: nowrap; overflow-x: автоматический; .paper {flexible: 0 0 автоматическая; } }

Мы используем flex-wrap для достижения того же эффекта, что и в предыдущем примере.
Браузерная поддержка решения flexbox лучше. Работает в IE и Edge.

Написание CSS кода меню

1. Мы стилизуем .nav-scroller, .nav-scroller__item и .nav-scroller__item:

.nav-скроллер {переполнение-y: скрыто; цвет фона: #fff; box-shadow: 0 0,125 rem 0,25 rem rgba (0, 0, 0, 0,075); } .nav-scroller__items {display: flex; Flex-wrap: nowrap; overflow-x: автоматический; белое пространство: nowrap; } .nav-scroller__item {цвет: # 424242; дисплей: гибкий; набивка: 0,5 бэр 1,25 бэр; оформление текста: нет; }

Список используемых свойств:

• overflow-y: hidden — скрывает содержимое, выходящее за нижний край элемента .nav-scroller;
• background-color: #fff — установить цвет фона .nav-scroller;
• box-shadow: 0 0.125rem 0.25rem rgba (0, 0, 0, 0.075) — добавляет тень к .nav-scroller;
• display: flex — превратить элемент в гибкий контейнер;
• overflow-x: auto — разрешает горизонтальную прокрутку, будет доступно при необходимости;
• white-space: nowrap — запретить перенос текста на новую строку, даже если он в нее не помещается

На этом этапе меню будет выглядеть так:

2. Добавьте правую границу ко всем элементам, кроме последнего:

.nav-scroller__item: not (: last-child) {border-right: 1px solid #eee; }

3. Выберите активный пункт меню с другим цветом фона:

.nav-scroller__item_active {цвет фона: # fff59d; }

Мы указываем активный пункт меню, добавляя к нему класс nav-scroller__item_active.

4. Добавьте стили, которые изменят фон элемента меню при наведении на него курсора:

/ * для всех элементов, кроме активного * / .nav-scroller__item: not (.nav-scroller__item_active): hover {background-color: # f5f5f5; } / * для активного элемента * / .nav-scroller__item_active: hover {background-color: # fff176; }

Вот как легко создать горизонтальное меню с прокруткой.

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

Свойства и значения overflow

visible — отображает все содержимое элемента даже за пределами указанной ширины.
скрытый — отображается только область внутри элемента, остальное скрыто.
scroll — принудительное добавление горизонтальной (y) или горизонтальной (x) полосы прокрутки.
auto — горизонтальная полоса прокрутки добавляется автоматически, если блок меньше.
Рассмотрим пример класса CSS. По ширине и высоте мы устанавливаем желаемую ширину и высоту блока (содержимое блока не будет выходить за рамки), а с помощью свойства переполнения: auto; при необходимости установите горизонтальную прокрутку
CSS код
.прокрутка {ширина: 150 пикселей; / * ширина нашего блока * / height: 100px; / * высота нашего блока * / background: #fff; / * цвет фона, белый * / border: solid 1px # C1C1C1; / * размер и цвет границы блока * / overflow: auto; / * свойство для горизонтальной прокрутки. Автоматизировать, если есть больше блоков */ }

Синтаксис

переполнение-x: авто | скрытый | свиток | видимый

Объектная модель

Object.style.overflowX

Прокрутка «overflow: auto»

Свойство «переполнение» отвечает за отображение полосы прокрутки»…

Свойство переполнения может принимать несколько значений:

автомобиль

скрытый

наследовать

исходный

перекрывать

восстановить

горка

не задано

видимый

В браузере — как можно увидеть все значения прокрутки?

щелкните элемент исследования, добавьте свойство переполнения, а затем вы можете выполнить итерацию…

Прокрутка «overflow: auto»

Переходим к примерам . использования и отображения прокрутки в html :

Создайте div с текстом и стилями («3 способа CSS»):

В свойствах заранее предполагаем, что высота будет меньше ожидаемого текста.

Для прокрутки установите «overflow: auto»:

Мы выдаем приведенный выше код здесь:

как прокручивать html — overflow: overflow: scroll;

как сделать прокрутку html — qaru

как сделать прокрутку html — qaru

как сделать прокрутку html — qaru

Песочница

Винни-Пух не всегда был против того, чтобы немного освежиться, особенно в одиннадцать часов утра, потому что к тому времени завтрак уже давно закончился, а ужин еще даже не думал о том, чтобы начать. И, конечно же, он был ужасно счастлив видеть Кролика, вытаскивающего чашки и тарелки autohiddenscrollvisiblediv {white space: pre; overflow-x: {{игровая площадкаValue }}; }

Результат вывода прокрутки в html:

Как видите .. при использовании «overflow: auto» выводилась только вертикальная прокрутка.

Благодаря тому, что по горизонтали внутренний размер блока не превышает его внешний размер!

Спецификация

Каждая спецификация проходит несколько этапов утверждения.

• Рекомендация — эта спецификация одобрена W3C и рекомендуется в качестве стандарта.
• Кандидат в рекомендацию: стандартная группа удовлетворена тем, что соответствует своим целям, но сообществу разработчиков нужна помощь во внедрении стандарта.
• Предлагаемая рекомендация — на этом этапе документ передается в Консультативный совет W3C для окончательного утверждения.
• Рабочий проект — более зрелая версия проекта после обсуждения и рассмотрения для рассмотрения сообществом.
• Черновик редакции — Черновик доработанной версии редакции проекта.
• Проект — это первый вариант стандарта.

Прокрутка «overflow: scroll»

По сути, scroll и auto ведут себя одинаково .. вы можете попрактиковаться в замене прокрутки на auto и назад…

Придадим нашему блоку размер width: 200 px;»

Внутри него мы создадим второй блок, который будет больше, чем наш размер, указанный выше «width: 500 px;»

А для примера с прокруткой используйте overflow: scroll;»

как прокручивать html — overflow: overflow: scroll;

как прокручивать html — overflow: overflow: scroll;

как прокручивать html — overflow: overflow: scroll;

как прокручивать html — overflow: overflow: scroll;

Результат использования прокрутки «overflow: scroll;»

Мы видим из предполагаемого примера прокрутки, что в этом примере присутствует как вертикальная, так и горизонтальная прокрутка!

Использовать горизонтальную или вертикальную прокрутку

Например . вам просто нужно показать тип прокрутки . или горизонтальный:

переполнение-x:

Или просто вертикальная прокрутка:

переполнение-y:

Разберем пример выводи одного типа прокрутки…

Следовательно, в соответствии с вашими потребностями мы изменяем горизонтальную прокрутку букв «x» или вертикальную прокрутку букв «y»

Пример только одной прокрутки — горизонтальной:

как делать прокрутку html — overflow: overflow-y: hidden; переполнение-x: прокрутка;

как делать прокрутку html — overflow: overflow-y: hidden; переполнение-x: прокрутка;

как делать прокрутку html — overflow: overflow-y: hidden; переполнение-x: прокрутка;

как делать прокрутку html — overflow: overflow-y: hidden; переполнение-x: прокрутка;

Результат вывода — только горизонтальная прокрутка

В приведенном выше примере мы видим только одну прокрутку — горизонтальную!

Используйте это для своего здоровья! Не забудьте сказать спасибо Тег :
как делать прокрутку html
как прокручивать страницу в html
как создать полосу прокрутки в html
как создать блок горизонтальной прокрутки в html
показывает полосу прокрутки
прокрутка в HTML

Улучшения для меню с горизонтальной прокруткой

1. Выравнивание активного пункта по центру

Чтобы активный пункт меню появлялся в центре при открытии страницы, вы можете написать небольшой код на JavaScript:

document.addEventListener (‘DOMContentLoaded’, () => {const $ navItems = document.querySelector (‘nav-scroller__items’); const $ navItemActive = $ navItems.querySelector (‘nav-scrollerget__item_stactiveItemct (‘ nav-scrollerget__item_stactiveItemct ‘); $ navItemActive.getBoundingClientRect (); const navItemsLeft = navItemActiveRect.left — navItemsRect.left + (navItemActiveRect.Rects navsctemLeft; });

Этот скрипт после того, как дерево DOM будет готово, автоматически прокрутит меню, чтобы элемент с классом nav-scroller__item_active был, по возможности, центрирован.