как сделать только вертикальную прокрутку в меню?
Здравствуйте,
Есть боковое меню (сайдбар), каждое новое подменю открывается слева направо и имеет фиксированную высоту, необходимо сделать так, чтобы когда пунктов много у подменю, то у него появлялся бы вертикальный скролл, для это прописываю overflow-y: auto; , но в таком случае подменю следующего уровня (те что правее) перестают отображаться и появляется горизонтальный скролл для них.
Непонятен механизм overflow-y: auto; , почему он влияет на горизонтальное пространство тоже?
Кусочек кода:
.menu__submenu < position: absolute; top: 0; left: 100px; height: 150px; width: 100px; overflow-y: auto; outline: solid blue 1px; >.menu__item
Отслеживать
задан 8 апр 2017 в 20:23
97 7 7 бронзовых знаков
Все верно. Ведь подменю находиться внутри меню, а у него ширина меньше нужного, вот и скролл появляеться. Что не так то?
8 апр 2017 в 22:25
@НазарКалитюк, но у подменю ведь абсолют, а значит он выбивается из потока и может выходить за рамки ширины родителя и так и происходит, пока не задано overflow-y , причем именно -y , то есть контроль по вертикали. Непонятен механизм этого свойства
Как сделать вертикальный скролл?
Есть такая менюшка, она ездит со скроллом страницы и полностью не помещается на высоту экрана.
Проблема в том что когда я уменьшаю высоту меню и показываю вертикальный скролл то эти все пункты выезжают вправо и как бы блок становится больше. И появляется горизонтальная полоса прокрутки
column-count: 3; height: 80vh; overflow-y: scroll;
Как сделать что бы блок растягивался в высоту и что бы можно было скроллить?
- Вопрос задан более трёх лет назад
- 5018 просмотров
Как сделать вертикальный скролл в html
1) Создаем блоки, которые мы будем использовать в вертикальном скролле.
2) Добавляем в конце страницы блок Другое -> T123 HTML-код и вставляем в него код, который находится ниже.
3.1) В части 1 нам нужно указать id всех блоков, которые будут отображаться.
var sections = $(«#rec109090577, #rec109090584, #rec109090585, #rec109090586»);
4) Если у вас на сайте внизу есть плашка Made On Tilda, в части 2 нужно добавить этот код. В противном случае, ваш аккаунт могут забанить.
setTimeout(function() «).parent().appendTo(«#fullpage»).addClass(«section») > >, 3000)
5) В части 3 можно указать дополнительные настройки:
// Скорость скролла
scrollingSpeed: 600,
// Анимация
// Можно заменить «easeInOutCubic» на любую другую анимацию. Список анимаций вы можете найти тут:
// https://easings.net/ru
easing: «easeInOutCubic»,
// Управление клавиатурой
keyboardScrolling: true,
// Стрекли управления на горизонтальном скролле
controlArrows: true,
// Скролл с последнего экрана переводит на первый экран
loopBottom: true,
// Скролл с последнего экрана переводит на первый экран
loopTop: true,
// Якорные ссылки на страницу.
// Вы можете на любом экране добавить кнопку, с ссылкой #About, при нажатии на неё пользователь попадет на экран, который отмечен как About.
// Так-же, можно скопировать ссылку mysite.com/#about и при переходе на неё, пользователь попадет сразу на экран About.
anchors:[‘Intro’, ‘About’, ‘Shop’, ‘Contacts’],
Прокручиваемый HTML-блок
Создаем блок с прокручиваемым текстом с помощью CSS и HTML
Прокручиваемый HTML-блок — это блок, в котором, когда его содержимое больше размеров самого блока, справа и снизу появляются полосы прокрутки. Другими словами, если у вас есть блок, в котором может поместиться около 50 слов, и у вас есть текст, состоящий из 200 слов, в прокручиваемом HTML-блоке появятся полосы прокрутки, чтобы вы могли видеть остальные 150 слов. В стандартном HTML-блоке дополнительный текст просто выходит за его границы.
Создать прокручиваемый HTML-блок ( скролл для сайта ) довольно просто.
Вам просто нужно установить ширину и высоту элемента, а затем использовать свойство CSS overflow , чтобы указать поведение элемента, когда содержимое выходит за его пределы.
Что делать с дополнительным текстом?
Когда текста больше, чем может поместиться в доступное пространство макета, у вас есть несколько вариантов:
- Перепишите текст, чтобы он стал короче.
- Позвольте, чтобы текст выходил за пределы контейнера, и надейтесь, что макет может растягиваться, чтобы справиться с этой ситуацией.
- Обрежьте текст там, где он выходит за пределы контейнера.
- Добавьте полосы прокрутки (для текста — обычно вертикальные), чтобы с их помощью можно было просмотреть весь текст.
Лучшим вариантом, как правило, является последний: создать прокручиваемый текстовый блок. Тогда пользователь сможет прочитать весь текст, а макет останется без изменений.
HTML и CSS для этого :
здесь текст.
overflow: auto; указывает браузеру добавлять полосы прокрутки ( скролл ), если текст выходит за границы блока div .
Но для того, чтобы это сработало, также нужно задать для этого блока div свойства ширины и высоты, чтобы определить границы контейнера.
Вы также можете обрезать текст, изменив значение свойства overflow с auto на hidden . Если вы не укажете свойство overflow , скролл на сайте работать не будет, и текст будет выходить за границы блока div .
Вы можете добавить полосы прокрутки не только для текста
Если у вас есть большое изображение, которое вы хотите отображать на меньшем пространстве, можно добавить вокруг него полосы прокрутки так же, как и для текста.
В этом примере изображение размером 400 на 509 пикселей размещено внутри абзаца, размер которого составляет 300 на 300 пикселей.
Полосы прокрутки могут использоваться в таблицах
Длинные таблицы могут быть очень трудными для восприятия, но, помещая их в блок div ограниченного размера, а затем, добавляя свойство overflow ( как способ сделать скролл ), можно создавать таблицы с большим количеством данных, которые не займут слишком много пространства на странице,
Самый простой способ сделать это — так же, как изображение и текст, просто оберните таблицу в блок div , установите его ширину и высоту и добавьте свойство overflow ( скролл внутри div ):
Name Phone . Jennifer 502-5366
Однако при этом имеет место один нюанс. В подобных случаях, как правило, также появляется горизонтальный скролл, потому что браузер предполагает, что, чтобы дать пользователю возможность просмотреть всю таблицу, нужны две полосы прокрутки.
Существует множество способов исправить это, например, изменение ширины таблицы и некоторые другие. Но я предпочитаю просто отключить горизонтальную прокрутку с помощью свойства CSS3 overflow-x . Просто укажите для блока div свойство overflow-x: hidden; , и горизонтальная полоса прокрутки будет удалена. Обязательно проверьте, чтобы одновременно с этим у вас не исчез и сам контент.
Firefox поддерживает использование overflow для тегов TBODY
Одна действительно приятная особенность браузера Firefox заключается в том, что вы можете использовать свойство overflow во внутренних тегах таблиц, таких как tbody и thead или tfoot . Это означает, что вы можете установить полосы прокрутки для содержимого таблицы, а ячейки заголовков останутся привязанными к ним.
Это работает только в Firefox , что не очень хорошо, но это полезная функция, если ваши читатели используют только Firefox . Посмотрите следующий пример, чтобы понять, что я имею в виду.
Name Phone . Jennifer 502-5366
Вадим Дворников автор-переводчик статьи « HTML Scroll Box »