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

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

body{
   overflow-x:hidden  // disable horizontal scrolling.
}

Это может быть важной информацией: у меня также есть это в моем теге head, потому что я также не желаю, чтобы пользователь мог изменять масштаб:

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />

Спасибо

 Ponmalar15 мая 2012 г., 06:37
Ссылка на это, чтобы отключить прокрутку: / Stackoverflow.com вопросы / 2527899 / ...

Ответы на вопрос(10)

Решение Вопроса
html, body {
  overflow-x: hidden;
}
body {
  position: relative;
}

и я споткнулся об этом. Не может заставить его работать без него.

 Ron Tesler04 авг. 2015 г., 11:16
Превосходно! работал на меня !!
 Mathew25 авг. 2015 г., 08:40
Я не могу поверить во что-то такое маленькое, как положение: относительное; держал его от работы. Благодарность
 JP de la Torre12 окт. 2014 г., 05:49
Этот сделал работу за меня.
 daekano14 янв. 2015 г., 23:54
Это должен быть принятый ответ. Отличная детективная работа.
 Camilo Sanchez27 июл. 2015 г., 23:15
Согласен с @daekano Этот ответ должен быть отмечен как принятый ответ. Это сработало и для меня.

document.body.addEventListener('touchstart', function(e){ e.preventDefault(); });

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

Взято отсюда: Отключение прокрутки в веб-приложении iPhone?

 Jordan Sitkin06 нояб. 2014 г., 01:14
это только я или это кажется совершенно безрассудным?
 Chango11 нояб. 2012 г., 17:11
Да, именно поэтому он говорит, чтоa smarter logic is needed to select when to prevent the scrolling.
 tibalt11 нояб. 2012 г., 16:58
ты понимаешь, что отключаешь даже вертикальную прокрутку страниц, верно?
 panzi31 мар. 2013 г., 20:56
Я не могу использовать это, потому что это также предотвращает любой HTML 5contextmenu будет отображаться (поддерживается Firefox 20 для Android).
 Artanis11 окт. 2015 г., 01:13
Chango - идеальное решение! Поскольку я использую собственный скрипт прокрутки в своем мобильном веб-приложении, этот фрагмент кода, наконец, решил все мои проблемы сразу!

но не один клик / нажатие.

document.body.addEventListener('touchstart', function(e){ e.preventDefault(); });

Это работает для меня:

window.addEventListener("touchstart", function(event){
             if(event.target.tagName=="HTML" || event.target.tagName=="BODY"){
                     event.preventDefault();
             }
} ,false);

Это не работает на 100%, и я также добавил это:

window.addEventListener("scroll",function(){
    window.scrollTo(0,0)
},false)

Попробуй добавить

html {
  overflow-x: hidden;
}

так же ка

body {
  overflow-x: hidden;
}
 James Duffy24 мая 2014 г., 01:10
Прочтите мой ответ. Я сказал добавить его в тег HTML, а не только в тело.
 yaqoob07 мая 2015 г., 06:25
на некоторых мобильных устройствах прокрутка полностью отключается.
 Sammy23 мая 2014 г., 19:55
прочитайте вопрос. это уже отмечено там.

хотя я не тестировал каждое устройство, которое есть для тестирования: -)

$('body, html').css('overflow-y', 'hidden');
$('html, body').animate({
    scrollTop:0
}, 0);

Чтобы предотвратить прокрутку, но держите контекстное меню, попробуйте

document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });

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

Для более изощренного решения, которое позволяет использовать прокручиваемые элементы в неуправляемом корпусе и предотвращает резиновую резинку, посмотрите мой ответ здесь:

https: //stackoverflow.com/a/20250111/143115

 Amir28 окт. 2014 г., 15:39
это не работает в Firefox версии Android
 pfac25 нояб. 2015 г., 16:56
Только что проверил это и отлично работал с Safari на iOS, а также с Chrome и Firefox на Android.
 brannigan18 янв. 2018 г., 11:51
Текущие версии Chrome нуждаются в этом:document.body.addEventListener('touchmove', function(e){ e.preventDefault(); }, { passive: false });. Обратите внимание, что объекты становятсяtrue таким образом используется захват событий.

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

Скроллинг

Чтобы ответить на OP, единственное, что вам нужно сделать, чтобы отключить прокрутку, это перехватить окноscroll а такжеtouchmove события и звонокpreventDefault а такжеstopPropagation о событиях, которые они генерируют; вот та

window.addEventListener("scroll", preventMotion, false);
window.addEventListener("touchmove", preventMotion, false);

function preventMotion(event)
{
    window.scrollTo(0, 0);
    event.preventDefault();
    event.stopPropagation();
}

А в таблице стилей убедитесь, что вашbody а такжеhtml теги включают следующее:

html:
{
    overflow: hidden;
}

body
{
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
}
Zooming

Однако прокрутка - это одно, но вы, вероятно, также хотите отключить масштабирование. Что вы делаете с метатегом в вашей разметке:

<meta name="viewport" content="user-scalable=no" />

Все это вместе дает вам опыт, похожий на приложение, вероятно, лучше всего подходит для холста.

(Остерегайтесь советов некоторых людей добавлять такие атрибуты, какinitial-scale а такжеwidth метатегу, если вы используете холст, потому что холстымасшта их содержимое, в отличие от блочных элементов, и вы будете чаще получать уродливые холсты).

 Ishamael06 июн. 2018 г., 03:17
Настройкаoverflow дляhtml очевидно необходим. Без этого, но со всеми остальными советами из этой ветки, все еще была некоторая прокрутка. Предотвращение событий не требовалось в моем случае.
 user330400705 дек. 2016 г., 09:28
После долгих поисков и попыток у меня сработал только этот подход. Я не могу сказать, как я благодарен тебе, приятель, ты спас мне жизнь!

В заголовке страницы добавь

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-sacle=1, maximum-scale=1, user-scalable=no">

В таблице стилей страницы добавьте

html, body {
  overflow-x: hidden;
  overflow-y: hidden;
}

Это и HTML, и тело!

используйте это в стиле

body
{
overflow:hidden;
width:100%;
}

Используйте это в заголовке тега

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
 StinkyCat24 февр. 2014 г., 12:37
overflow: hidden и width: 100% как в теле, так и в html было достаточно. Thks! (в айфоне!)

Ваш ответ на вопрос