Как скрыть горизонтальный скролл css
Перейти к содержимому

Как скрыть горизонтальный скролл css

  • автор:

Как скрыть вертикальную и горизонтальную полосы прокрутки для блока div

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

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

Браузеры на основе Webkit , такие как Chrome , Safari и т. д., предоставляют псевдоселектор для настройки цвета и размера полос прокрутки в соответствии с настройками сайта.

Вы можете убрать полосу прокрутки ( скролл ), используя следующий фрагмент CSS- кода :

.__sb-test::-webkit-scrollbar

Поскольку этот CSS-селектор специфичен для webkit-браузеров , мы должны создать резервный вариант для достижения такого же эффекта в других браузерах, таких как Firefox , IE , Edge и т.д.

Возможное решение для создания скролла на чистом CSS :

This is very lengthy statement that will wrap. This is very lengthy statement that will wrap and show scroll

.outer < min-height:200px; width:200px; overflow:hidden; >.inner

Приведенный выше CSS-код позволяет убрать вертикальный скролл, но у этого способа есть один недостаток — в разных браузерах будет разная ширина / размер полос прокрутки. Поэтому нельзя статически указать их. Таким образом, нам нужно адаптировать данную концепцию и прописать динамическое определение высоты прокрутки с помощью JavaScript .

Решение на основе JS

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

  1. Этот скрипт принудительно включает полосу прокрутки для элемента с помощью CSS overflow-x:scroll ;
  2. Затем вычисляется ширина полосы прокрутки;
  3. Рассчитанная ширина устанавливается как отрицательный отступ для внешнего элемента. Это эффективно скрывает полосу прокрутки во всех браузерах.

_findScrollbarWidth() < let parent: JQuery; let child: JQuery; if (this.sbarWidth === null) < const style = document.createElement('style'); style.innerHTML = '.__sb-test::-webkit-scrollbar < width: 0px; >‘; document.body.appendChild(style); parent = $(‘

‘ + ‘

‘) .appendTo(‘body’); child = parent.children(); this.sbarWidth = child.innerWidth() — child.height(99).innerWidth(); // очистка parent.remove(); document.body.removeChild(style); > > _hideScrollBars()

Убираем горизонтальный скролл в мобильной версии сайта

Admin 05.05.2017 , обновлено: 13.09.2017 CSS, WordPress

Как убрать прокрутку по горизонтали в мобильной версии сайта. Как настроить css стили, чтобы скроллинг влево и вправо при просмотре через телефон не работал. Это же касается отключения горизонтальной прокрутки на iPhone.

Для выполнения этих задач нужно в стилях CSS своего сайта прописать следующее:

html, body <
/* Убирает прокрутку по горизонтале, для мобильной версии */
overflow-x: hidden;
>

Чтобы убрать горизонтальный скролл одного HTML тега html или body не всегда достаточно, чтобы прокрутка исчезла. Обязательно нужно добавить overflow-x: hidden; к обоим тегам.

Если это не помогает, значит нужно искать ошибки в дизайне сайта. Какой-то элемент в дизайне сайта выходит за края и тем самым стиль overflow-x: hidden; перестаёт работать.

У меня так случилось с плагином Antispam Bee на сайте WordPress. Версия плагина 2.7.0 работала отлично, а как вышла версия 2.7.1, то плагин внёс в дизайн сайта какой-то лишний элемент.

Я долго искал причину ошибки, прежде чем понял, что причина вызвана плагином. Сначала пришлось потратить несколько часов и перелопатить весь css код на своём сайте. И только когда ничего не помогло, пришла догадка, что возможна причина в некорректном вмешательстве плагинов в работу сайта.

Как оказалось плагин Antispam Bee вносил что-то своё в дизайн формы комментариев. При этом видимого изменения не было.

А внутри HTML кода он вносил изменения и эту форму:

Менял на следующую:

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

Я так и не нашёл как победить эту ошибку, не изменяя свои стили. Пришлось внести коррективы у себя в CSS. Вместо указанного стиля у себя на сайте:

#respond form input[type=»text»], #respond form textarea <
width: 100%;
>

Я уменьшил поле комментариев со 100% до 97%.

#respond form input[type=»text»], #respond form textarea <
width: 97%;
>

После этого возможность горизонтального скролинга исчезла.

Читайте также

У сайта нет цели самоокупаться, поэтому на сайте нет рекламы. Но если вам пригодилась информация, можете лайкнуть страницу, оставить комментарий или отправить мне подарок на чашечку кофе.

Комментарии к статье “ Убираем горизонтальный скролл в мобильной версии сайта ” (10)

30.09.2017 в 21:53
Спасибо
помогло html не убирал, теперь все нормально
15.02.2019 в 18:21

У меня сайт без плагина, делал адаптивную верстку давно. А сейчас стал замечать, есть горизонтальная прокрутка в одну сторону с права на лево. Не знаю что и делать, только догадываюсь, что где-то править надо. А где? Сайт mycompplus.ru

Автор записи
16.02.2019 в 11:38

На разрешении в 768 у вас примешивается стиль pill_m, в котором задано width: 768px !important;. Этот участок нужно переписать.

28.08.2020 в 12:38
Ребята, такая же проблема. Кто поможет исправить?
28.08.2020 в 12:54

Sam, Как описал мне админ, мне это помогло
28.08.2020 в 14:47

Юрий, спасибо за обратную связь. Можешь посмотреть у меня? Я плохо еще шарю. У меня проблема в кнопке scroll-on-top была. Я установил плагин до темы и он видимо взял произвольную ширину. Удалил кнопку, почистил кэш и все равно не помогает. Видимо этот плагин внес изменения в код, как пишет автор, но я не совсем понимаю как по аналогии решить проблему(что и куда прописать и исправить). Если не трудно, оставь контакт для связи. Вот больной engineeringdoc.ru

Автор записи
29.08.2020 в 01:51

Посмотрел сайт, ответ дан в первом абзаце этой статьи. Только не говорите, что вы пробовали �� Вам надо поставить overflow-x: hidden;.

29.08.2020 в 18:49

Спасибо за обратную связь. В какой файл это добавить, если я собрал на конструкторе и движок wp. Я так понимаю что это файл с css, но где он находится(в какой папке) и как называется не понимаю. Подскажите для «особо умных в этом деле» P. S. Очень хочу исправить сам, но как слепой котенок уперся в угол.

30.08.2020 в 13:04

Все сработало! Я вставил команду через внешний вид-> настроить->дополнительные стили, для тех у кого wordpress. Всем спасибо!

16.11.2020 в 19:31

Добрый день! Подскажите, что нужно сделать у меня, чтобы убрать горизонтальный скролл. Сайт: sst-26.ru

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

Если возникнут вопросы пишите на электронную почту.

Скрыть горизонтальный скролл в iframe: CSS, jQuery

Чтобы скрыть горизонтальную полосу прокрутки в iframe, примените свойство CSS overflow-x: hidden; непосредственно к элементу iframe:

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

iframe < overflow-x: hidden; /* Больше нет горизонтальной прокрутки, et voilà! */ >

Этот небольшой фрагмент CSS убирает горизонтальную прокрутку, при этом сохраняющий чистоту вёрстки и возможность вертикальной прокрутки.

Обеспечение вертикальной прокрутки и отзывчивости

Включение вертикальной прокрутки

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

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

iframe < overflow-x: hidden; /* Горизонтального привидения уже не вернуть */ overflow-y: auto; /* Вертикальная прокрутка доступна, приятного чтения! */ >

Таким образом, пользователи смогут комфортно просматривать содержимое iframe, сохраняя при этом аккуратность внешнего вида.

Реализация отзывчивости

Фиксированные размеры могут вызвать появление нежелательной горизонтальной полосы прокрутки. Чтобы создать отзывчивые iframe используйте предлагаемые Bootstrap’ом классы:

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

Использование классов для улучшения управления

Создание отдельного класса для iframe облегчит вашу работу и поможет избежать конфликтов стилей. Вот пример оформления:

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

/* Теперь у вас есть ваш собственный класс для идеального iframe */ .responsive-iframe < overflow-x: hidden; overflow-y: auto; >/* И применение класса к iframe */ 

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

Представьте себе художественную галерею, стены которой украшают картины (��️). Ваш iframe — это окно (��), через которое вы смотрите на искусство.

��️��️��️��️ ☀ Посетители любуются вашими творениями ��️��️��️��️ ���� 

Теперь мы слегка опустим шторы (��️‍��️), чтобы скрыть вид снизу:

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

��️��️��️��️ �� Еще больше впечатляющего искусства ��️��️��️��️ ��️ 

Задание overflow-x в состояние hidden действует аналогичным образом. Вы продолжаете видеть содержимое, но минус горизонтальная полоса прокрутки.

Работа в различных браузерах и на разных устройствах

Тестирование в различных браузерах

Протестировать ваше решение в разных браузерах крайне важно. Свойство overflow-x: hidden; в большинстве случаев работает отлично, но каждый браузер может иметь свои специфичные особенности.

Адаптация под различные устройства

Аудитория может использовать различные типы устройств. После того как вы применили принципы адаптивного дизайна, убедитесь, что iframe работает и выглядит корректно на всех размерах экранов.

Избегание потенциальных проблем

Навигация по конфликтам стилей

Конфликты стилей могут привести к тому, что ваш CSS не будет влиять на iframe. Используйте специфические селекторы и управляйте каскадностью, чтобы ваши стили были приоритетными.

Использование валидных атрибутов

Знакомый многим атрибут scrolling="no" является устаревшим в стандарте HTML5. Уделите приоритет CSS для поддержания валидности и актуальности кода.

Обновление соответствующее стандартам

Атрибут seamless , применяемый для iframes, был популярен в прошлом, но сейчас не поддерживается HTML5. Браузеры не поддерживают его, что делает его использование нерациональным.

Полезные материалы

  1. Свойство CSS Overflow | CSS-Tricks – подробный анализ свойства overflow , необходимого для управления полосами прокрутки.
  2. overflow – CSS: Каскадные таблицы стилей | MDN – подробная документация по свойству overflow от Mozilla. Понимание данного свойства является критически важным для правильной работы с CSS.
  3. Как скрыть полосы прокрутки с помощью CSS – простое пошаговое руководство, обясняющее, как скрыть полосы прокрутки с помощью CSS.
  4. Скрыть полосу прокрутки, но позволить прокрутку – Stack Overflow – актуальная дискуссия на Stack Overflow на тему скрытия полос прокрутки в iframe.
  5. CodePen от Chris Coyier – пример от Chrisa Coyier на CodePen, демонстрирующий методы скрытия полос прокрутки при сохранении функциональности прокрутки.

overflow-block

CSS свойство overflow-block устанавливает, что будет отображаться, когда содержимое переполняет начальные и конечные края блока. Это может быть ничего, полоса прокрутки или содержимое переполнения.

Примечание: Свойство overflow-block отображается на overflow-y (en-US) или overflow-x (en-US) в зависимости от режима записи документа.

Синтаксис

/* Значения свойства */ overflow-block: visible; overflow-block: hidden; overflow-block: scroll; overflow-block: auto; /* Глобальные значения */ overflow-block: inherit; overflow-block: initial; overflow-block: unset; 

Свойство overflow-block указывается как одно ключевое слово, выбранное из списка значений ниже.

Значения

Содержимое не обрезается и может отображаться за пределами начального и конечного краёв блока отступа.

При необходимости содержимое обрезается, чтобы соответствовать размеру блока в поле заполнения. Полосы прокрутки отсутствуют.

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

Зависит от пользовательского агента. Если содержимое помещается в поле дополнения, оно выглядит так же, как visible, но всё же устанавливает новый контекст форматирования блока. Настольные браузеры устанавливают полосы прокрутки, если содержимое переполняется.

Формат синтаксиса

overflow-block =
visible | (en-US)
hidden | (en-US)
clip | (en-US)
scroll | (en-US)
auto

Примеры

HTML

ul> li> code>overflow-block:hiddencode> — скрывает текст за пределами поля div id="div1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. div> li> li> code>overflow-block:scrollcode> — всегда добавляет полосу прокрутки div id="div2"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. div> li> li> code>overflow-block:visiblecode> — отображает текст вне поля, если это необходимо div id="div3"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. div> li> li> code>overflow-block:autocode> — в большинстве браузеров, что эквивалентно code>scrollcode> div id="div4"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. div> li> ul> 

CSS

#div1, #div2, #div3, #div4  border: 1px solid black; width: 250px; height: 100px; > #div1  overflow-block: hidden; margin-bottom: 12px; > #div2  overflow-block: scroll; margin-bottom: 12px; > #div3  overflow-block: visible; margin-bottom: 120px; > #div4  overflow-block: auto; margin-bottom: 120px; > 

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

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