Html не работает скролл

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

Иногда требуется сделать прокрутку. Либо горизонтальную, либо вертикальную прокрутку html. Почему может не работать прокрутка?

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

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

За вывод полосы прокрутки отвечает свойство «overflow».

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

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

нажимаем исследовать элемент добавляем свойство overflow и далее можно перебирать.

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

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

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

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

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

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

как сделать прокрутку html — overflow: overflow: scroll;

как сделать прокрутку html — overflow: auto

как сделать прокрутку html — overflow: auto

как сделать прокрутку html — overflow: auto

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

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

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

Перейдем ко второму примеру прокрутки:

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

В принципе, по поведению scroll и auto похожи. вы можете потренироваться. заменить scroll на auto и обратно.

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

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

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

Разместим приведенный код прокрутки ниже:

как сделать прокрутку html — overflow: overflow: scroll;

как сделать прокрутку html — overflow: overflow: scroll;

как сделать прокрутку html — overflow: overflow: scroll;

как сделать прокрутку html — overflow: overflow: scroll;

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

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

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

К примеру. вам требуется показать только один вид прокрутки. либо горизонтальный:

Либо только вертикальную прокрутку:

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Почему не работает функция scrollTo?

Ребята, чисто для интереса балуюсь разными фичами, и столкнулся с тем, что что на простой HTML странице не работает scrollTo(x, y). У меня не задана высота страницы height по умолчанию auto. Но, если я в css файле прописываю к body, к примеру, height: 1000px;, то всё отлично работает, есть прокрутка страницы вниз на заданный интервал. Вопрос: Разве для scrollTo() нужно указывать высоту body, а без этого она не работает?

• Вопрос задан более трёх лет назад
• 745 просмотров

Разве для scrollTo() нужно указывать высоту body, а без этого она не работает?

Если у Вас нет полосы прокрутки, то прокрутка «сработает», но визуально от этого ничего не изменится.

По моему, ещё прокрутку желательно делать и для BODY и для HTML одновременно, т.к. в каких-то баузерах, с этим были проблемы. Возможно информация уже не актуальна.

есть прокрутка страницы вниз на заданный интервал.

Romantic: вот и ответ на Ваш вопрос (который кстати я уже выше писал). Если нет полосы прокрутки — то метод ScrollTo() — не растянет элемент HTML/BODY на 100% высоты и не добавит к этому значению ещё +50px (50px — для примера), что бы страница стала скроллится на 50px вниз.

Или, давайте попробую объяснить по другому. Когда Вы колёсиком мыши пытаетесь проскроллить страницу, у которой нет полосы прокрутки — происходит «ничего». ScrollTo() в данном случае работает аналогично колёсику мыши. То есть, если страница не скроллится, это не значит, что колёсико мыши не работает, это значит что скроллить её просто некуда 🙂

Аналогичная ситуация будет при использовании «якорей», при попытке перейти к якорю в конце страницы, страница проскрллится до конца, но если контент после якоря занимает высоту меньше высоты экрана — то будет просто скролл страницы в конец, и якорь будет не в самом верху страницы.

Источник

Не работает вертикальный скролл в flex

Делаю чатик, функционал уже готов, только вот не получилось сделать вертикальный скролл. Сам скролл я добавил overflow-y: scroll а вот сообщения всё равно не скроллят. Когда я убираю display: flex скролл начинает работать, только всё из-за этого начинает ехать.

1 ответ 1

Логику поведения не понял, но решить удалось следующими действиями:

1. элементу #messages (родителю «сообщений») задаём min-height: 100% , а не height , ну и убираем от него overflow .
2. А вот родителю #messages ( .chat-body , а лучше создать «элемент обёртку») выдаём уже ограничение по высоте (если надо) и overflow-y: scroll

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.10.15.40479

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

Почему не работает скролл?

Хочу попробовать перенести скролл с боди на внутренний элемент. Почему не работает? https://codepen.io/dubx/pen/GdwrXw

Поясняю — размеры height не известны заранее.

• Вопрос задан более трёх лет назад
• 508 просмотров

Посняю — когда размеры контента будут больше чем высота твоего блока которая «ЕСТЕСВЕННО не известны заранее», то тогда «ЕСТЕСВЕННО » и появиться скролл.

не охото это говорить, но код у тебя правильный

лол, как я тебе и сказал ты просто уменьшил высотку блока и\или увеличил контент.

Убери calc и поста overflow без Y, все равно скролл будет
гений блин

wufapexef, эхх. просто почитай на досуге про css

Ты убрал высоту у блока, а в css это значит что будет height: auto
это значит — блок АВТОМАТИЧЕСКИ увеличивается от твоего контента, как может быть скролл?
скролл появляется при ПЕРЕПОЛНЕНИИ блока, но у блока АВТОМАТИЧЕСКАЯ высота, то есть он будет УВЕЛИЧИВАТЬСЯ.
в общем если ты не понял, я сдаюсь

Про калк и vh я тебе сказал убрать ради примера, что бы убедиться что скролл есть.

Короче ты может задать 1 экран, да это 100vh, а на мобилках с помощью медиазапроса поставить уже фиксированную высоту

если я правильно понял что ты хочешь

Верстальщик Ваш, судя по всему не правльно понял, потмоу что это вообще не понятно при чем тут

а на мобилках с помощью медиазапроса поставить уже фиксированную высоту

При чем тут медиазапросы? Откуда брать фиксированную высоту? Вообще в курсе поведения 100vh в мобильных браузерах или мы на разных языках сейчас?

Источник