Отключить прокрутку на всех мобильных устройствах
Похоже, что в Интернете должно быть решение для всего этого, но я не уверен, почему я не могу его найти. Я хочу отключить горизонтальную прокрутку на мобильных устройствах. В основном пытаюсь добиться этого:
Это может быть релевантная информация: у меня также есть этот тег в моей голове, потому что я также не хочу, чтобы пользователь мог масштабировать:
14 ответов
Относительное положение важно, и я просто споткнулся об этом. Не мог бы без него работать.
Следующее работает для меня, хотя я не тестировал все устройства для тестирования 🙂
Для устройств Apple position: relative не работает. Следующий код работает на всех устройствах:
Самый простой способ, который довольно прост с использованием только CSS кодов:
Безуспешно попробовав все ответы, мне удалось отключить мобильную прокрутку, просто добавив:
Для этого важно использовать % , а не vh . height: 100% — это то, чего я все время скучал, сумасшедший.
Это работает для меня:
Это не работает на 100%, и я также добавил это:
Установка для положения относительного значения не работает. Это работает, только если я установил положение тела на фиксированное :
Свойство CSS touch-action может дать вам то, что вы ищете, хотя может не работать во всех ваших целевых браузерах.
В заголовке страницы добавьте
В таблице стилей страницы добавьте
Это и html, и body!
Использовать это в стиле
Используйте это в теге заголовка
Я подозреваю, что почти все действительно хотят отключить масштабирование / прокрутку, чтобы сделать работу более похожей на приложение; потому что ответы, кажется, содержат элементы решений как для масштабирования, так и для прокрутки, но на самом деле никто не прибил ни одного из них.
Прокрутка
Чтобы ответить OP, единственное, что вам нужно сделать для отключения прокрутки, — это перехватить события окна scroll и touchmove и вызвать preventDefault и stopPropagation для генерируемых ими событий. ; вот так
Убедитесь, что в вашей таблице стилей теги body и html включают следующее:
Zooming
Однако прокрутка — это одно, но вы, вероятно, также захотите отключить масштабирование. Что вы делаете с метатегом в разметке:
Все это вместе дает вам опыт, похожий на приложение, вероятно, лучше всего подходит для холста.
(Остерегайтесь советов некоторых добавлять атрибуты, такие как initial-scale и width , в метатег, если вы используете холст, потому что холст масштабирует их содержимое, в отличие от блока элементы, и чаще всего вы получите уродливый холст).
Для будущих поколений:
Чтобы предотвратить прокрутку, но сохранить контекстное меню, попробуйте
Он по-прежнему предотвращает намного больше, чем некоторые могут захотеть, но для большинства браузеров единственное предотвращаемое поведение по умолчанию — это прокрутка.
Для более сложного решения, которое позволяет прокручивать элементы в непрокручиваемом теле и предотвращает резиновую ленту, взгляните на мой ответ здесь:
Ответ cgvector не сработал для меня, но это сработало:
Я бы не стал оставлять это просто так, нужна более разумная логика, чтобы выбрать, когда предотвращать прокрутку, но это хорошее начало.
Убираем горизонтальный скролл в мобильной версии сайта
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
Как отключить мгновенную прокрутку на Android 12
Google недавно выпустил Android 12 для широкой публики, и новая ОС получила отличные отзывы повсюду. В Android 12 внесено множество изменений в пользовательский интерфейс, но в последнее время вызывает споры одно из них — Snap Scrolling.
Если вы сталкивались с проблемами анимации или испытывали странное поведение при прокрутке в Android 12, то вы не одиноки. Вот все, что вам нужно знать о Snap Scrolling.
Что такое мгновенная прокрутка?
Snap Scrolling — это новая функция в Android 12, которая интеллектуально сортирует элементы на экране для удобного использования. Это означает, что когда вы прокручиваете статью, список или просто новостную ленту, Android 12 автоматически идентифицирует отдельные истории или сообщения и помещает их на ваш экран.
Эта функция призвана упростить вам прокрутку и просмотр элементов без необходимости постоянно перемещать текст по экрану, чтобы все уместилось в одном месте.
Можете ли вы отключить Snap Scrolling?
Snap Scrolling — это не управляемая пользователем функция в Android 12, и, более того, ее реализация сильно зависит от приложения, которое вы используете. Определенное приложение может выбрать использование этой функции на вашем устройстве или полностью отказаться от нее.
Следовательно, вероятный сценарий состоит в том, что вам придется отключать Snap Scrolling индивидуально для каждого приложения, если приложение предлагает вам эту опцию. В других случаях вы можете использовать описанные ниже обходные пути, чтобы отключить мгновенную прокрутку для определенного приложения или вашего устройства.
Связанный: Как изменить часы на экране блокировки на Android 12
Как отключить мгновенную прокрутку
Как обсуждалось выше, вы не можете отключить Snap Scrolling в Android 12 изначально.
Однако вы можете использовать описанные ниже обходные пути, чтобы отключить эту функцию для определенного приложения или всего пользовательского интерфейса системы. Давайте начнем.
Метод # 01: в системном интерфейсе
Мы можем отключить Snap Scrolling, отключив анимацию в Android 12. Для начала просто выполните следующие действия.
Откройте приложение «Настройки» и нажмите «Доступность».
Теперь нажмите «Текст и отображение».
Включите переключатель «Удалить анимацию».
Вот и все! Все анимации теперь будут отключены для вашего пользовательского интерфейса Android 12, включая Snap Scrolling.
Метод № 02: В приложении
Если у вас возникли проблемы с Snap Scrolling в определенных приложениях (особенно в Instagram, Facebook и т. Д.), То вы не одиноки. Поскольку это новая функция, многие службы пытаются максимально использовать ее, адаптируя ее для своих собственных приложений.
Хорошим примером этого может быть Instagram, который недавно протестировал эту функцию на огромной группе своих пользователей. К сожалению, многим не понравилось использование этой функции, когда вы вынуждены просматривать каждую публикацию и обновлять в своей ленте одно за другим.
Если вы находитесь в той же лодке или столкнулись с аналогичной проблемой с другим приложением, вы можете просто понизить версию приложения, чтобы отключить Snap Scrolling.
Как только в инструменте или сервисе появится функция Snap Scrolling с возможностью ее отключения, вы сможете обновить свое приложение в будущем. Мы рекомендуем использовать следующие источники, чтобы получить APK-файлы для вашего устройства.
Есть ли способ полностью отключить Snap Scrolling?
К сожалению, невозможно полностью отключить Snap Scrolling, не повлияв на анимацию в Android 12. Мы рекомендуем вам отправить необходимый отзыв в Google и присоединиться к огромному количеству пользователей, запрашивающих то же самое.
Компания должна ввести возможность отключить его, если за причину встанет достаточное количество людей. На данный момент вы не можете полностью отключить Snap Scrolling в Android 12.
Мы надеемся, что этот пост помог пролить свет на Snap Scrolling и по возможности избавиться от него. Если у вас есть еще вопросы, не стесняйтесь оставлять их в разделе комментариев ниже.