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

Нужно добавить к блоку в котором убираем скролл стиль:

overflow-x:hidden;

Есть что добавить? Зарегистрируетесь

Курсы по программированию на Хекслете

Backend-разработка

Разработка серверной части сайтов и веб-приложений

Frontend-разработка

Разработка внешнего интерфейса сайтов и веб-приложений и верстка

Создание сайтов

Разработка сайтов и веб-приложений на JS, Python, Java, PHP и Ruby on Rails

Тестирование

Ручное тестирование и автоматизированное тестирование на JS, Python, Java и PHP

Аналитика данных

Сбор, анализ и интерпретация данных на Python

Интенсивные курсы

Интенсивное обучение для продолжающих

DevOps

Автоматизация настройки локального окружения и серверов, развертывания и деплоя

Веб-разработка

Разработка, верстка и деплой сайтов и веб-приложений, трудоустройство для разработчиков

Математика для программистов

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

JavaScript

Разработка сайтов и веб-приложений и автоматизированное тестирование на JS

Python

Веб-разработка, автоматическое тестирование и аналитика данных на Python

Java

Веб-разработка и автоматическое тестирование на Java

PHP

Веб-разработка и автоматическое тестирование на PHP

Ruby

Разработка сайтов и веб-приложений на Ruby on Rails

Go

Курсы по веб-разработке на языке Go

HTML

Современная верстка с помощью HTML и CSS

SQL

Проектирование базы данных, выполнение SQL-запросов и изучение реляционных СУБД

Git

Система управления версиями Git, регулярные выражения и основы командой строки

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

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

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

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

Как убрать полосы прокрутки?

Убрать горизонтальные или вертикальные полосы прокрутки со страницы, не зависимо от объёма страницы.

Решение

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

Способ основан на использовании свойства overflow , которое добавляется к селектору HTML, как показано в примере 1.

Пример 1. Страница без полос прокрутки

HTML5 CSS2.1 IE Cr Op Sa Fx

    Полосы прокрутки html < overflow: hidden; >div Бла-бла

В данном примере используется значение hidden , которое «обрезает» весь контент выходящий за рамки элемента.

Также можно использовать свойство overflow-x , чтобы скрыть только горизонтальную полосу прокрутки и overflow-y — для сокрытия вертикальной полосы. В примере 2 показано добавление слоя с минимальной шириной 800 пикселов. При уменьшении окна браузера до этой величины, слой перестаёт менять свои размеры и появляется горизонтальная полоса прокрутки. С помощью свойства overflow-x полосы прокрутки скрываются.

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

HTML5 CSS3 IE Cr Op Sa Fx

    Полосы прокрутки   Бла-бла

Свойства overflow-x и overflow-y входят в спецификацию CSS3 и не проходят валидацию при проверке стилей на CSS2.1.

Как убрать горизонтальную полосу прокрутки | CSS

Искл., ежели содержимым является элемент, у которого свойство position имеет значение fixed .

длина окна:

 div тысячадевятьсотдевяностодевятикилограммовый

То есть если элемент при direction: ltr; уводить за левый (при direction: rtl; — за правый) край страницы, то горизонтальной полосы прокрутки не будет.

direction: rtl;

 тысячадевятьсотдевяностодевятикилограммовый

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

длина окна:

 html, body тысячадевятьсотдевяностодевятикилограммовый

Следует доработать вёрстку: при отзывчивой, сделанной специалистом, хорошо разбирающимся в CSS, проблем не должно возникать

длина окна:

 body тысячадевятьсотдевяностодевятикилограммовый

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