Как запретить скроллить body на мобильных/тач устройствах при overflow: hidden?

Question

[Вадим Белкин]

При открытие модального окна с position:fixed у body добавляется класс с параметром overflow: hidden и height: 100%. С компа скроллится только содержимое модалки, но с телефона (проверял на iPhone и Windows Phone 8/8.1) скролится и сама страница (за пример можно взять модальное окно bootstrap). Как можно запретить скролл страницы, оставив возможность скроллить внутри модалки?

Answer 1

[ITZver]

Вот мое решение через CSS.

Answer 2

[Alexander]

Укажите мета тег

<meta name="viewport" content="width=device-width, initial-scale=1">

body{
overflow:hidden;
}
МояМодалка#{
overflow:scroll;
}
Как то так.

Comments

[Вадим Белкин]

данные свойства и meta с такими же параметрами уже установлены. Нужного результата нет.

[Alexander]

Вадим Белкин: media query запрос присутствуют ?

[Вадим Белкин]

Alexander Kim: да.

[Alexander]

Странно у меня вроде все норм. Можете сверить.

[Вадим Белкин]

Alexander Kim: В эмуляторе в хроме это естественно работает. Проблема проявляется на реальных устройствах.

Answer 3

[Григорий]

$(window).scroll(function(){
   if($('body').scrollTop()>0)
        $('body').scrollTop(0);
});

P.S.: Можно ещё проще:

$(window).scroll(function(){
        $('body').scrollTop(0);
});

Comments

[Вадим Белкин]

Пробовал такой вариант, на WP скроллится как обычно, на iPhone не тестировал. А на ПК дергается туда сюда при попытке скролла

[Alexander]

причем здесь js тут в css - e надо разбираться.

[Григорий]

Вадим Белкин: Ещё есть вариант:

.shield-for-body{min-width:100%;min-height:100%;position:fixed;top:0;left:0;background:rgba(0,0,0,0.5);}

$('body').append('<div class="shield-for-body" />');

[Григорий]

Alexander Kim: JS легко может управлять и CSS-ом, если это необходимо.

[Вадим Белкин]

Григорий: подобный блок с оверлеем у модалки bootsrap создается. Проблема в том, что если у body стоит overflow: hidden то какой бы блок поверх не был (с большим z-index, position: fixed и заполнял все размеры экрана), то body все равно скролится на этих телефонах.

[Григорий]

Вадим Белкин: да... последнее что на ум пришло: https://jsfiddle.net/grigruss/wtnoyyx3/

[Вадим Белкин]

Григорий: с position:fixed вместе с overflow: hidden; для body на WP работает как нужно.

body.fixed {
  position: fixed;
  overflow: hidden;
}

на iPhone пока возможности нет посмотреть.

[Григорий]

Вадим Белкин: с iPhone уже можно будет отследить браузер, и подстроить, если работать не будет...

[Андрей Игнатов]

Работает, но если модалка не в начале страницы, то при открытии модалки - перематывает на верх страницы, как бы этого избежать?

[Вадим Белкин]

Андрей Игнатов, тоже сталкивался с этим. в голову пришла только мысль перед тем как сделать overflow: hidden определить положение скролла и после выставления overflow: hidden сделать смещение скролла. вроде проверял, у блоков с overflow: hidden можно скриптом скроллить содержимое. правда не помню на iOS проверял или на Android

[Econavi]

Все варианты с position: fixed выглядят кастыльно из-за того, что когда страница прокручивается вверх, в Safari на iOS выезжают сверху и снизу элементы управления.
Как по мне - это не очень хороший UX, так как пользователь явно не скролил страницу, а элементы выехали.
Говно в общем. Нужен способ, которые оставит страницу на месте, типа overflow: hidden, но что бы работал))