Почему появляется горизонтальная прокрутка css html
Перейти к содержимому

Почему появляется горизонтальная прокрутка css html

  • автор:

Горизонтальная прокрутка в HTML Textarea без переноса строк

Чтобы добавить горизонтальную прокрутку в Textarea, используйте следующие CSS-свойства:

Скопировать код

textarea < overflow-x: auto; // Горизонтальный скролл появится по мере необходимости. white-space: nowrap; // Текст будет располагаться в одной строке, без автоматического переноса! >

Это сочетание CSS-правил позволяет активировать горизонтальную прокрутку и при этом исключить автоматический перенос текста на новую строку, если он не помещается в заданную ширину поля Textarea.

Значимость отсутствия переноса строк

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

Учет совместимости браузеров в программировании

Ранее использовавшийся атрибут wrap=’off’ не соответствует стандартам W3C, хотя он и продолжает работать в IE 6+, Mozilla 3+ и других современных браузерах. Но для обеспечения соответствия актуальным стандартам и гарантированной совместимости рекомендуется использовать CSS свойства overflow-x: auto; и white-space: nowrap; .

Возможности свойств white-space и overflow-x

Комбинация свойств white-space: nowrap; с overflow-x: scroll; обеспечивает единый пользовательский опыт в различных браузерах. Для опционального управления текстовым форматированием может быть полезно CSS свойство white-space: pre; , которое сохраняет пробелы и переводы строк, что очень актуально при работе с элементом textarea.

Визуализация

В качестве примера рассмотрим Textarea с горизонтальной прокруткой:

Почему появляется горизонтальная полоса прокрутки?

Непонятно, зачем вам это нужно? ну а вообще left:15vw; , убрать и все норм. — Но опять-же, не понятно, зачем вам это, что вы пытаетесь добиться от этого.

20 мар 2018 в 23:39

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Горизонтальная полоса прокрутки появляется при ненулевом значении top

Когда блок 100% высоты и 100% ширины сдвигается вниз, сначала появится вертикальная прокрутка. А вот появление вертикальной прокрутки — уже не даст Вам отобразить блок на 100% в ширину (так как полоса прокрутки займет определенную ширину), и тогда появится горизонтальная полоса прокрутки.

Для решения нужно установить запрет отображения полосы прокрутки для одного из родительских блоков с классом s1, или сразу для всего body

overflow-x: hidden; 

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

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

Горизонтальное меню с прокруткой выполним на чистом CSS. JavaScript будем использовать только для добавления к нему различных улучшений.

Создание разметки

 

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

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

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

1. Зададим стили для .nav-scroller , .nav-scroller__items и .nav-scroller__item :

.nav-scroller { overflow-y: hidden; background-color: #fff; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); } .nav-scroller__items { display: flex; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; } .nav-scroller__item { color: #424242; display: flex; padding: 0.5rem 1.25rem; text-decoration: none; }

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

  • 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 — делаем элемент flex-контейнером;
  • overflow-x: auto — разрешаем прокрутку по горизонтали, она будет доступна при необходимости;
  • white-space: nowrap — запрещаем переносить текст на новую строку, даже если он не помещается в ней;

На этом этапе меню будет иметь следующий вид:

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

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

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

Добавим правую границу ко всем пунктам Горизонтального меню кроме последнего

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

.nav-scroller__item_active { background-color: #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; }

Изменение фона элемента меню при наведении на него курсора

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

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

Меню с горизонтальной прокруткой на устройствах с маленьким экраном

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

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

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

JavaScript

document.addEventListener('DOMContentLoaded', () => { const $navItems = document.querySelector('.nav-scroller__items'); const $navItemActive = $navItems.querySelector('.nav-scroller__item_active'); if (!$navItemActive) { return; } const navItemsRect = $navItems.getBoundingClientRect(); const navItemActiveRect = $navItemActive.getBoundingClientRect(); const navItemsLeft = navItemActiveRect.left - navItemsRect.left + (navItemActiveRect.width - navItemsRect.width) / 2; $navItems.scrollLeft = navItemsLeft; });

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

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

2. Прокручивания меню с помощью удерживания кнопки мыши

В этом улучшении уберём полосу прокрутки и подключим микро-библиотеку Dragscroll. Эта библиотека поможет нам очень просто добавить возможность прокрутки меню посредством удерживания кнопки мыши (стиль «перетащить и отпустить» или «щелкнуть и удерживать»).

Для этого в CSS добавим следующий код:

.nav-scroller__items::-webkit-scrollbar { display: none; }

Это правило выключит отображение полосы прокрутки.

После этого на страницу подключим файл dragscroll.js :

Добавим класс dragscroll к прокручиваемому элементу:

 

Причина появления горизонтальной прокрутки на экране 240х320?

Сверстал адаптивно простую страницу: del
На мобильном экране 240х320 (Андроид) страница ездит вправо/влево на несколько пикселей. То есть как бы появляется горизонтальная прокрутка.
В чем может быть причина? Фиксированной ширины нигде нет, на других экранах все окей.

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

Комментировать

Решения вопроса 1

Sezyara

Фронтенд-разработчик

Иногда бывает такое. Все из-за отступов у блоков со 100% шириной (или контента в них) или у тех. Поищи эти блоки и поиграй с их отступами по краям.

Ответ написан более трёх лет назад

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *