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

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

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

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

 <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" /> 

благодаря

Solutions Collecting From Web of "Отключить прокрутку во всех мобильных устройствах"

 html, body { overflow-x: hidden; } body { position: relative } 

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

Ответ cgvector не работал для меня, но это сделало:

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

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

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

Для будущих поколений:

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

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

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

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

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

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

 html { overflow-x: hidden; } 

так же как

 body { overflow-x: hidden; } 

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

Скроллинг

Чтобы ответить на 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; } 

Масштабирование

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

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

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

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

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

 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" /> 

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

 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) 

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

 <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, html'). Css ('overflow-y', 'hidden'); $ ('Html, body'). Animate ({scrollTop: 0}, 0);

Это предотвращает прокрутку на мобильных устройствах, но не один клик / кран.

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