Вопрос по iphone, mobile, css, android – Отключить прокрутку на всех мобильных устройствах

50

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

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

Спасибо

Ссылка на это, чтобы отключить прокрутку: / Stackoverflow.com вопросы / 2527899 / ... Ponmalar

Ваш Ответ

10   ответов
97
html, body {
  overflow-x: hidden;
}
body {
  position: relative;
}

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

Этот сделал работу за меня. JP de la Torre
Это должен быть принятый ответ. Отличная детективная работа. daekano
Согласен с @daekano Этот ответ должен быть отмечен как принятый ответ. Это сработало и для меня. Camilo Sanchez
Превосходно! работал на меня !! Ron Tesler
Я не могу поверить во что-то такое маленькое, как положение: относительное; держал его от работы. Благодарность Mathew
-2

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

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

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

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

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

ты понимаешь, что отключаешь даже вертикальную прокрутку страниц, верно? tibalt
Да, именно поэтому он говорит, чтоa smarter logic is needed to select when to prevent the scrolling. Chango
Chango - идеальное решение! Поскольку я использую собственный скрипт прокрутки в своем мобильном веб-приложении, этот фрагмент кода, наконец, решил все мои проблемы сразу! Artanis
Я не могу использовать это, потому что это также предотвращает любой HTML 5contextmenu будет отображаться (поддерживается Firefox 20 для Android). panzi
это только я или это кажется совершенно безрассудным? Jordan Sitkin
-2

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

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

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

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

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

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

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

Только что проверил это и отлично работал с Safari на iOS, а также с Chrome и Firefox на Android. pfac
это не работает в Firefox версии Android Amir
Текущие версии Chrome нуждаются в этом:document.body.addEventListener('touchmove', function(e){ e.preventDefault(); }, { passive: false });. Обратите внимание, что объекты становятсяtrue таким образом используется захват событий. brannigan
12

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

html {
  overflow-x: hidden;
}

так же ка

body {
  overflow-x: hidden;
}
Прочтите мой ответ. Я сказал добавить его в тег HTML, а не только в тело. James Duffy
на некоторых мобильных устройствах прокрутка полностью отключается. yaqoob
прочитайте вопрос. это уже отмечено там. Sammy
9

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

Скроллинг

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

После долгих поисков и попыток у меня сработал только этот подход. Я не могу сказать, как я благодарен тебе, приятель, ты спас мне жизнь! user3304007
Настройкаoverflow дляhtml очевидно необходим. Без этого, но со всеми остальными советами из этой ветки, все еще была некоторая прокрутка. Предотвращение событий не требовалось в моем случае. Ishamael
4

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

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" />
overflow: hidden и width: 100% как в теле, так и в html было достаточно. Thks! (в айфоне!) StinkyCat
2

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

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

1

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

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)

Похожие вопросы