Ответ 1

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

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

Ответ 2

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

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

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

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

Ответ 3

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

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

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

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

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

fooobar.com/questions/14539/...

Ответ 4

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

html {
  overflow-x: hidden;
}

а также

body {
  overflow-x: hidden;
}

Ответ 5

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

скроллинг

Чтобы ответить на 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 в метатег, если вы используете холст, потому что холсты масштабируют свое содержимое, в отличие от элементов блока, и вы завершаете с уродливым холстом, чаще всего).

Ответ 6

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

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

Ответ 7

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

<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, так и тело!

Ответ 8

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

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)

Ответ 9

Сенсорное действие CSS-свойства может дать вам то, что вы ищете, хотя оно может работать не во всех ваших целевых браузерах.

html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    touch-action: none;
}

Ответ 10

Следующее работает для меня, хотя я не тестировал каждое устройство, которое есть, чтобы проверить :-)

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

Ответ 11

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

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