Отключить прокрутку на всех мобильных устройствах
Это звучит так, будто должно быть решение для этого по всему Интернету, но я не уверен, почему я не могу его найти. Я хочу отключить горизонтальную прокрутку на мобильных устройствах. В основном пытается добиться этого:
Это может быть релевантная информация: у меня также есть это в моем теге, потому что я также не хочу, чтобы пользователь мог увеличить:
10 ответов
Относительная позиция важна, и я просто споткнулся об этом. Не удалось заставить его работать без него.
Ответ cgvector не работал у меня, но это делало:
Я бы не оставил его просто так, нужна более разумная логика, чтобы выбрать, когда нужно предотвращать прокрутку, но это хороший старт.
Для будущих поколений:
Чтобы предотвратить прокрутку, но сохраните контекстное меню, попробуйте
Он по-прежнему предотвращает путь больше, чем может кому-то понравиться, но для большинства браузеров единственное поведение по умолчанию, которое следует предотвратить, должно прокручиваться.
Для более сложного решения, которое позволяет прокручивать элементы внутри неконтролируемого тела и предотвращает использование резиновой ленты, посмотрите на мой ответ здесь:
Я подозреваю, что большинство людей действительно хотят отключить масштабирование/прокрутку, чтобы собрать больше приложений; потому что ответы, похоже, содержат элементы решений как для масштабирования, так и для прокрутки, но никто не прибил ни одного.
скроллинг
Чтобы ответить на OP, единственное, что вам нужно сделать, чтобы отключить прокрутку, — это перехватить события scroll и touchmove окна и вызвать preventDefault и stopPropagation в событиях, которые они генерируют; так
И в таблице стилей убедитесь, что теги body и html включают следующее:
Масштабирование
Однако прокрутка — это одно, но вы, вероятно, тоже хотите отключить масштабирование. Что вы делаете с метатегами в вашей разметке:
Все это вместе дает вам приложение, похожее на опыт, возможно, лучше всего подходит для холста.
(Будьте осторожны с рекомендацией некоторых добавить атрибуты, такие как initial-scale и width в метатег, если вы используете холст, потому что холсты масштабируют свое содержимое, в отличие от элементов блока, и вы завершаете с уродливым холстом, чаще всего).
Убираем горизонтальный скролл в мобильной версии сайта
Admin 
05.05.2017 , обновлено: 13.09.2017 
CSS, WordPress
Как убрать прокрутку по горизонтали в мобильной версии сайта. Как настроить css стили, чтобы скроллинг влево и вправо при просмотре через телефон не работал. Это же касается отключения горизонтальной прокрутки на iPhone.
Для выполнения этих задач нужно в стилях CSS своего сайта прописать следующее:
Чтобы убрать горизонтальный скролл одного HTML тега html или body не всегда достаточно, чтобы прокрутка исчезла. Обязательно нужно добавить overflow-x: hidden; к обоим тегам.
Если это не помогает, значит нужно искать ошибки в дизайне сайта. Какой-то элемент в дизайне сайта выходит за края и тем самым стиль overflow-x: hidden; перестаёт работать.
У меня так случилось с плагином Antispam Bee на сайте WordPress. Версия плагина 2.7.0 работала отлично, а как вышла версия 2.7.1, то плагин внёс в дизайн сайта какой-то лишний элемент.
Я долго искал причину ошибки, прежде чем понял, что причина вызвана плагином. Сначала пришлось потратить несколько часов и перелопатить весь css код на своём сайте. И только когда ничего не помогло, пришла догадка, что возможна причина в некорректном вмешательстве плагинов в работу сайта.
Как оказалось плагин Antispam Bee вносил что-то своё в дизайн формы комментариев. При этом видимого изменения не было.
А внутри HTML кода он вносил изменения и эту форму:
Менял на следующую:
В результате какой-то невидимый элемент выходил за границу экрана. Элемент не отображался и потому понять, что именно стало причиной неисправности было затруднительно. И настольная версия браузера и мобильная никаких лишних элементов не показывала.
Я так и не нашёл как победить эту ошибку, не изменяя свои стили. Пришлось внести коррективы у себя в CSS. Вместо указанного стиля у себя на сайте:
Я уменьшил поле комментариев со 100% до 97%.
После этого возможность горизонтального скролинга исчезла.
Читайте также
У сайта нет цели самоокупаться, поэтому на сайте нет рекламы. Но если вам пригодилась информация, можете лайкнуть страницу, оставить комментарий или отправить мне подарок на чашечку кофе.
Комментарии к статье “ Убираем горизонтальный скролл в мобильной версии сайта ” (10)
Спасибо
помогло html не убирал, теперь все нормально
У меня сайт без плагина, делал адаптивную верстку давно. А сейчас стал замечать, есть горизонтальная прокрутка в одну сторону с права на лево. Не знаю что и делать, только догадываюсь, что где-то править надо. А где? Сайт mycompplus.ru
На разрешении в 768 у вас примешивается стиль pill_m, в котором задано width: 768px !important;. Этот участок нужно переписать.
Ребята, такая же проблема. Кто поможет исправить?
Sam, Как описал мне админ, мне это помогло
Юрий, спасибо за обратную связь. Можешь посмотреть у меня? Я плохо еще шарю. У меня проблема в кнопке scroll-on-top была. Я установил плагин до темы и он видимо взял произвольную ширину. Удалил кнопку, почистил кэш и все равно не помогает. Видимо этот плагин внес изменения в код, как пишет автор, но я не совсем понимаю как по аналогии решить проблему(что и куда прописать и исправить). Если не трудно, оставь контакт для связи. Вот больной engineeringdoc.ru
Посмотрел сайт, ответ дан в первом абзаце этой статьи. Только не говорите, что вы пробовали �� Вам надо поставить overflow-x: hidden;.
Спасибо за обратную связь. В какой файл это добавить, если я собрал на конструкторе и движок wp. Я так понимаю что это файл с css, но где он находится(в какой папке) и как называется не понимаю. Подскажите для «особо умных в этом деле»
P. S. Очень хочу исправить сам, но как слепой котенок уперся в угол.
Все сработало! Я вставил команду через внешний вид-> настроить->дополнительные стили, для тех у кого wordpress. Всем спасибо!
Добрый день! Подскажите, что нужно сделать у меня, чтобы убрать горизонтальный скролл. Сайт: sst-26.ru
Отключить прокрутку на всех мобильных устройствах
похоже, что для этого должно быть решение по всему интернету, но я не уверен, почему я не могу его найти. Я хочу отключить горизонтальную прокрутку на мобильных устройствах. В основном, пытаясь достичь этого:
Это может быть соответствующая информация: у меня также есть это в моей голове, потому что я также не хочу, чтобы пользователь мог увеличивать:
10 ответов
положение относительно важно, и я просто споткнулся об этом. Без него ничего не получится.
ответ cgvector не работал для меня, но это сделало:
Я бы не оставил его просто так, нужна более умная логика, чтобы выбрать, когда предотвратить прокрутку, но это хорошее начало.
для будущих поколений:
чтобы предотвратить прокрутку, но сохранить contextmenu, попробуйте
он по-прежнему предотвращает больше, чем некоторые могли бы, но для большинства браузеров единственным предотвращенным поведением по умолчанию должна быть прокрутка.
для более сложного решения, которое позволяет прокручивать элементы внутри нескролируемого тела и предотвращает rubberband, взгляните на мой ответ здесь:
Я подозреваю, что большинство людей действительно хотят отключить масштабирование / прокрутку, чтобы собрать более похожий на приложение опыт; потому что ответы, похоже, содержат элементы решений для масштабирования и прокрутки, но никто не прибил ни один из них.
скролл
чтобы ответить OP, единственное, что вам нужно сделать, чтобы отключить прокрутку, — это перехватить окно scroll и touchmove события и вызов preventDefault и stopPropagation о событиях, которые они генерируют; как так что
и в вашей таблице стилей, убедитесь, что ваш body и html теги включают в себя следующее:
масштабирование
однако прокрутка-это одно, но вы, вероятно, хотите отключить масштабирование. Что вы делаете с метатегом в своей разметке:
все они вместе взятые дают вам приложение, как опыт, вероятно, лучше всего подходит для холста.
(будьте осторожны с советами некоторых, чтобы добавить атрибуты, такие как initial-scale и width к метатегу, если вы используете холст, потому что canvasses масштаб их содержимое, в отличие от блочных элементов, и вы получите уродливый холст, чаще всего).
На мобильных появляется горизонтальная прокрутка, как убрать?
VicTHOR, товарищ попросил ему сайт сделать, домен старый свой был, пока на нём тестим, потом перенесу ;)) 
- Вконтакте
seminyuri, потестил сайт(firefox, chrome) и с пк и с мобильного (chrome) никакаго скрола нет
как вариант можно задать всем элементам section