как убрать прокрутку на телефоне
Убираем горизонтальный скролл в мобильной версии сайта
Как убрать прокрутку по горизонтали в мобильной версии сайта. Как настроить 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
Ребята, такая же проблема. Кто поможет исправить?
Sam, Как описал мне админ, мне это помогло
Юрий, спасибо за обратную связь. Можешь посмотреть у меня? Я плохо еще шарю. У меня проблема в кнопке scroll-on-top была. Я установил плагин до темы и он видимо взял произвольную ширину. Удалил кнопку, почистил кэш и все равно не помогает. Видимо этот плагин внес изменения в код, как пишет автор, но я не совсем понимаю как по аналогии решить проблему(что и куда прописать и исправить). Если не трудно, оставь контакт для связи. Вот больной engineeringdoc.ru
Посмотрел сайт, ответ дан в первом абзаце этой статьи. Только не говорите, что вы пробовали 🙂 Вам надо поставить overflow-x: hidden;.
Спасибо за обратную связь. В какой файл это добавить, если я собрал на конструкторе и движок wp. Я так понимаю что это файл с css, но где он находится(в какой папке) и как называется не понимаю. Подскажите для «особо умных в этом деле»
P. S. Очень хочу исправить сам, но как слепой котенок уперся в угол.
Все сработало! Я вставил команду через внешний вид-> настроить->дополнительные стили, для тех у кого wordpress. Всем спасибо!
Добрый день! Подскажите, что нужно сделать у меня, чтобы убрать горизонтальный скролл. Сайт: sst-26.ru
Добавить комментарий Отменить ответ
Если возникнут вопросы пишите на электронную почту.
Отключить прокрутку на всех мобильных устройствах
похоже, что для этого должно быть решение по всему интернету, но я не уверен, почему я не могу его найти. Я хочу отключить горизонтальную прокрутку на мобильных устройствах. В основном, пытаясь достичь этого:
Это может быть соответствующая информация: у меня также есть это в моей голове, потому что я также не хочу, чтобы пользователь мог увеличивать:
10 ответов
положение относительно важно, и я просто споткнулся об этом. Без него ничего не получится.
ответ cgvector не работал для меня, но это сделало:
Я бы не оставил его просто так, нужна более умная логика, чтобы выбрать, когда предотвратить прокрутку, но это хорошее начало.
для будущих поколений:
чтобы предотвратить прокрутку, но сохранить contextmenu, попробуйте
он по-прежнему предотвращает больше, чем некоторые могли бы, но для большинства браузеров единственным предотвращенным поведением по умолчанию должна быть прокрутка.
для более сложного решения, которое позволяет прокручивать элементы внутри нескролируемого тела и предотвращает rubberband, взгляните на мой ответ здесь:
Я подозреваю, что большинство людей действительно хотят отключить масштабирование / прокрутку, чтобы собрать более похожий на приложение опыт; потому что ответы, похоже, содержат элементы решений для масштабирования и прокрутки, но никто не прибил ни один из них.
скролл
и в вашей таблице стилей, убедитесь, что ваш body и html теги включают в себя следующее:
масштабирование
однако прокрутка-это одно, но вы, вероятно, хотите отключить масштабирование. Что вы делаете с метатегом в своей разметке:
все они вместе взятые дают вам приложение, как опыт, вероятно, лучше всего подходит для холста.
(будьте осторожны с советами некоторых, чтобы добавить атрибуты, такие как initial-scale и width к метатегу, если вы используете холст, потому что canvasses масштаб их содержимое, в отличие от блочных элементов, и вы получите уродливый холст, чаще всего).
Отключить прокрутку во всех мобильных устройствах
Похоже, должно быть решение для этого по всему Интернету, но я не уверен, почему я не могу его найти. Я хочу отключить горизонтальную прокрутку на мобильных устройствах. В основном пытаюсь добиться этого:
Это может быть релевантная информация: у меня также есть это в моем теге, потому что я также не хочу, чтобы пользователь мог увеличить масштаб:
Роль позиции важна, и я просто споткнулся об этом. Не удалось заставить его работать без него.
Ответ cgvector не работал для меня, но это сделало:
Я бы не оставил его просто так, нужна более разумная логика, чтобы выбрать, когда следует предотвращать прокрутку, но это хороший старт.
Взято отсюда: отключить прокрутку в веб-приложении iPhone?
Для будущих поколений:
Чтобы предотвратить прокрутку, но сохраняйте контекстное меню, попробуйте
Он по-прежнему препятствует тому, что может быть больше, чем может кому-то понравиться, но для большинства браузеров рекомендуется предотвращать только поведение по умолчанию, которое запрещено.
Для более сложного решения, которое позволяет прокручивать элементы в неконтролируемом теле и предотвращает резинку, взгляните на мой ответ здесь:
Я подозреваю, что большинство людей действительно хотят отключить масштабирование / прокрутку, чтобы собрать больше приложений; Потому что ответы, похоже, содержат элементы решений как для масштабирования, так и для прокрутки, но никто на самом деле не прибил ни одного.
Скроллинг
Чтобы ответить на OP, единственное, что вам нужно сделать, чтобы отключить прокрутку, – это перехватить события scroll и touchmove и вызвать preventDefault и stopPropagation на события, которые они генерируют; вот так
И в вашей таблице стилей убедитесь, что теги body и html включают следующее:
Масштабирование
Однако прокрутка – это одно, но вы, вероятно, тоже хотите отключить масштабирование. Что вы делаете с метатегами в вашей разметке:
Все это вместе дает вам опыт, похожий на приложение, вероятно, лучше всего подходит для холста.
(Будьте осторожны с рекомендациями некоторых, чтобы добавить атрибуты, такие как initial-scale и width к метатегу, если вы используете холст, потому что холсты масштабируют свое содержимое, в отличие от элементов блока, и вы завершаетесь уродливым холстом, чаще да, чем нет).
Используйте это в стиле
Используйте это в заголовке
Это работает для меня:
Он не работает на 100%, и я также добавил:
В заголовке страницы добавьте
В таблице стилей страницы добавьте
Следующие работы для меня, хотя я не тестировал каждое устройство, чтобы проверить 🙂
Это предотвращает прокрутку на мобильных устройствах, но не один клик / кран.
После обновления дёргается анимация и прокрутка страниц на Xiaomi (Redmi)
В интернете набирает ход проблема, которая появилась у владельцев телефонов Xiaomi (Redmi) – фризы анимации, которые проявились после обновления на Android 10, ни с того, ни с сего начинает дёргаться анимация перехода между приложениями, рабочими столами и даже прокрутка экрана воспроизводится с лагами и тормозами.
Я также, как и многие владельцы Xiaomi, столкнулся с фризами анимации на телефоне Mi 9 SE с прошивкой 11.0.2.0.
Я пытался оптимизировать систему с помощью всех инструментов доступных в приложении «Безопасность», многократно перезагружал смартфон, удалял обновления системных компонентов – ничего не помогало.
Поэтому я решил углубиться в интернет и поискать решение там, ведь раз проблема носит массовый характер, значит и решение кто-то должен был найти, и я не ошибся.
Имея ввиду мой опыт многолетнего тесного общения с компьютерами, я примерно представлял в чём может быть загвоздка фризов анимации на Xiaomi – где-то нарушилась работа с видеочипом, который обрабатывает анимацию, ему либо обрезают питание, либо не дают команду выйти на запланированную мощность, либо ещё какая ошибка закралась в драйвер. Но как оказать влияние на видео чип на Xiaomi, работающий на Android 10, с официальной глобальной прошивкой, там нет механизмов, доступных пользователю, с нужными параметрами.
В этом направлении я и начал поиски решения проблемы фризов, которые привели меня к решению проблемы с дёрганной анимацией и прокруткой.
Предупреждение: полагаю, что предложенное мной решение, которое помогло победить дёрганность на моём Mi 9 SE, временное, и после получения обновления прошивки надо вернуть параметры в положение по умолчанию.
Как убрать фризы анимации на Xiaomi
Запрет прокрутки при открытии модального окна
Приветствую. Представляю вашему вниманию перевод статьи «Prevent Page Scrolling When a Modal is Open», опубликованной 3 июня 2019 года за авторством Brad Wu
Бывало у вас такое? Открываете модальное окно, прокручиваете, а после закрытия оказываетесь на странице в позиции, отличающейся от той, с которой его открывали.
Подобное может происходить из-за того, что модальные окна являются такими же элементами страницы, как и любые другие. Они могут располагаться в фиксированной позиции, не препятствуя работе с остальным содержимым документа.
Порой это не становится проблемой. Например, когда высота содержимого страницы не превышает высоту области видимости экрана пользователя. Однако, в остальных случаях мы неизбежно сталкиваемся с этим. Хорошей новостью является то, что мы можем предотвратить появление скролла с помощью трюка с использованием CSS и JavaScript.
Давайте начнём с чего-нибудь простого
При открытии модального окна можно просто устанавливать элемент body по высоте равным области видимости (viewport) и скрывать вертикальную прокрутку:
Обратите внимание – чтобы это сработало, модальное окно должно быть по высоте меньше области видимости. Иначе полоса прокрутки будет нужна.
Отлично. А что насчёт мобильных?
Это решение отлично работает как на десктопах, так и на мобильных Android-устройствах. Однако, Safari для iOS требует немного больше внимания, поскольку body всё ещё может прокручиваться, когда модальное окно открыто.
Как альтернатива, мы можем задать для body фиксированное позиционирование.
Вот поэтому нам не обойтись без JavaScript
Можем использовать JavaScript, чтобы избежать всплытия события прикосновения к экрану. Все мы знаем, что при открытии модального окна, у него должен быть фоновый слой. К сожалению, в iOS метод stopPropagation() с событиями прикосновения работает немного неуклюже. Но у preventDefault() таких проблем нет. Это значит, что мы должны добавить обработчики событий к каждому DOM-элементу внутри модального окна, а не только к слою подложки или самому модальному окну. Хорошая новость в том, что много JavaScript-библиотек могут делать это, включая старый добрый jQuery.
Ах да, и ещё кое-что. Что если нам нужна прокрутка внутри модального окна? Нам всё ещё нужно вызвать реакцию на событие свайпа, но при достижении верха или низа модального окна, нам всё ещё нужно предотвращать всплытие. Кажется очень сложным (?? так что мы ещё не полностью выкарабкались).
Давайте улучшим фиксированный body
Вот с чем мы работали:
С помощью JavaScript можно вычислить положение прокрутки страницы, и добавлять это значение в CSS. Благодаря этому body не будет прокручиваться обратно в начальную позицию.
Данное решение работает, но после закрытия окна всё ещё происходит небольшой сдвиг. А именно, похоже, когда модальное окно открыто и для body задано фиксированное позиционирование, страница уже теряет положение прокрутки. Следовательно, нам нужно восстановить положение. Давайте изменим JavaScript, чтобы учитывать этот момент.
Вот и всё. Теперь body не будет прокручиваться при открытом модальном окне, а положение прокрутки сохраняется и при открытии и при закрытии модального окна.