Запретить прокрутку тела (мобильные, родные браузеры)

В родном браузере Samsung Galaxy S5/S6, следующий фрагмент CSS:

body {
  overflow: hidden;
}

не останавливает движение тела от прокрутки.

Есть ли обходной путь для этого?

Изменение: как обсуждается ниже, это можно сделать, добавив переполнение: hidden в тег html. Но это вводит проблему, когда окно прокручивается вверх.

Можно ли предотвратить прокрутку тела без эффекта прокрутки (прокрутка страницы вверху вверх, когда html, тело переполняется: скрыто)?

Замечание: проблема воспроизводится в следующих средах:

Samsung Galaxy S5 (Android 5.0) Browser: Native;
Samsung Galaxy S6 (Android 6.0.1) Browser: Native;
iPhone 5S (iOS 8.4.1) Browsers: Chrome; Safari;
iPhone 6+ (iOS 9.3.2) Browsers: Chrome; Safari;

ОТВЕТЫ

Ответ 1

пытаться

body {
    overflow:hidden;
    position:fixed;
    top:0;
    bottom: 0;
}

Ответ 2

Css + Решение для Javascript:

Класс css для отключения прокрутки

.lock-scroll{
    position: fixed;
    width: 100%;
    height: 100%;
}

javascript, чтобы исправить прыжок scrollTop после применения класса css:

function disableScroll(elem){
    var lastScrollTop = $(elem).scrollTop();
    $(elem).addClass("lock-scroll");
    $(elem).css("top", "-" + lastScrollTop + "px");
}

function enableScroll(elem){
    var lastScrollTop = Number($('#wmd-input-39380954').css("top").match(/[0-9]/g).join(""));
    $(elem).removeClass("lock-scroll");
    $(elem).css("top", "0px");
    $(elem).scrollTop(lastScrollTop);
}

Отключить прокрутку по целевому элементу

index.html:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
        </script>
        <style>
            body{
                  background-color:#333333;
                  color: white;
              }
              #modalView{
                  position: fixed;
                  width: 100%;
                  height: 100%;
                  left: 0;
                  top: 0;
                  background: rgba(0,0,0,0.6);
                  overflow: scroll;
              }
              #modalViewScroll{
                width: 300px;
                height: 200px;
                overflow: scroll;
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                margin: auto;
                background: white;
                color: red;
              }
        </style>
    </head>
    <body>
        BODY SCROLL 1<br/>_____________<br/>BODY SCROLL 2<br/>_____________<br/>BODY SCROLL 3<br/>_____________<br/>BODY SCROLL 4<br/>_____________<br/>BODY SCROLL 5<br/>_____________<br/>BODY SCROLL 6<br/>_____________<br/>BODY SCROLL 7<br/>_____________<br/>BODY SCROLL 8<br/>_____________<br/>BODY SCROLL 9<br/>_____________<br/>BODY SCROLL 1<br/>_____________<br/>BODY SCROLL 2<br/>_____________<br/>BODY SCROLL 3<br/>_____________<br/>BODY SCROLL 4<br/>_____________<br/>BODY SCROLL 5<br/>_____________<br/>BODY SCROLL 6<br/>_____________<br/>BODY SCROLL 7<br/>_____________<br/>BODY SCROLL 8<br/>_____________<br/>BODY SCROLL 9<br/>_____________<br/>BODY SCROLL 1<br/>_____________<br/>BODY SCROLL 2<br/>_____________<br/>BODY SCROLL 3<br/>_____________<br/>BODY SCROLL 4<br/>_____________<br/>BODY SCROLL 5<br/>_____________<br/>BODY SCROLL 6<br/>_____________<br/>BODY SCROLL 7<br/>_____________<br/>BODY SCROLL 8<br/>_____________<br/>BODY SCROLL 9<br/>_____________<br/>BODY SCROLL 1<br/>_____________<br/>BODY SCROLL 2<br/>_____________<br/>BODY SCROLL 3<br/>_____________<br/>BODY SCROLL 4<br/>_____________<br/>BODY SCROLL 5<br/>_____________<br/>BODY SCROLL 6<br/>_____________<br/>BODY SCROLL 7<br/>_____________<br/>BODY SCROLL 8<br/>_____________<br/>BODY SCROLL 9<br/>_____________<br/>BODY SCROLL 1<br/>_____________<br/>BODY SCROLL 2<br/>_____________<br/>BODY SCROLL 3<br/>_____________<br/>BODY SCROLL 4<br/>_____________<br/>BODY SCROLL 5<br/>_____________<br/>BODY SCROLL 6<br/>_____________<br/>BODY SCROLL 7<br/>_____________<br/>BODY SCROLL 8<br/>_____________<br/>BODY SCROLL 9<br/>_____________<br/>BODY SCROLL 1<br/>_____________<br/>BODY SCROLL 2<br/>_____________<br/>BODY SCROLL 3<br/>_____________<br/>BODY SCROLL 4<br/>_____________<br/>BODY SCROLL 5<br/>_____________<br/>BODY SCROLL 6<br/>_____________<br/>BODY SCROLL 7<br/>_____________<br/>BODY SCROLL 8<br/>_____________<br/>BODY SCROLL 9<br/>_____________<br/>
        <div id="modalView">
            <div id="modalViewScroll">
                MODAALLLL SCROLL 1<br/>__________________<br/>MODAALLLL SCROLL 2<br/>__________________<br/>MODAALLLL SCROLL 3<br/>__________________<br/>MODAALLLL SCROLL 4<br/>__________________<br/>MODAALLLL SCROLL 5<br/>__________________<br/>MODAALLLL SCROLL 6<br/>__________________<br/>MODAALLLL SCROLL 7<br/>__________________<br/>MODAALLLL SCROLL 8<br/>__________________<br/>MODAALLLL SCROLL 9<br/>__________________<br/>MODAALLLL SCROLL 1<br/>__________________<br/>MODAALLLL SCROLL 2<br/>__________________<br/>MODAALLLL SCROLL 3<br/>__________________<br/>
            </div>
        </div>
        <script type="text/javascript">
            function scrollDisabled(e){
                    // Two option :
                    // 
                    // 1) scroll anywhere will scroll the modal but you have to handle scroll state, and disable scroll with close modal
                    // 
                    // if(scrollingModal){
                    //   $('#modalViewScroll').scrollTop($('#modalViewScroll').scrollTop() + e.deltaY);
                    //   return true;
                    // }

                    // 2) scroll only above the modal 
                    if (e.target.id == "modalViewScroll") {
                      $('#modalViewScroll').scrollTop($('#modalViewScroll').scrollTop() + e.deltaY);
                      return true;
                    }
                }

                function preventDefaultForScrollKeys(e) {
                  if(scrollDisabled(e)){
                    var keys = {37: 1, 38: 1, 39: 1, 40: 1};
                    if (keys[e.keyCode]) {
                        preventDefault(e);
                        return false;
                    }
                  }
                }

                function preventDefault(e) {
                  if(scrollDisabled(e)){
                    e = e || window.event;
                    if (e.preventDefault) e.preventDefault();
                    e.returnValue = false;
                  }
                }
                function hookScroll() {
                    if (window.addEventListener) // older FF
                        window.addEventListener('DOMMouseScroll', preventDefault, false);
                    window.onwheel = preventDefault; // modern standard
                    window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
                    window.ontouchmove = preventDefault; // mobile
                    document.onkeydown = preventDefaultForScrollKeys;
                }
                hookScroll();
        </script>
    </body>
</html>

Чтобы избежать прокрутки вверх с помощью огней щелчка

Вы должны добавить return false; после события click;

Пример:

<button onclick="openModal(); return false;">Open Modal</button>

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

Вам нужно установить overflow:hidden также для <html>.

Пример:

<html>
    <head>
        <style>
            html,body{overflow:hidden}
        </style>    
    </head>
    <body>
        // You html body
    </body>
</html>

Ответ 3

попробуйте добавить margin:0px !important для элемента body

Ответ 4

Я думаю, что вы можете просто сделать это с помощью boostrap modal pop up, просто скопируйте его с помощью html-страницы

body {
	width:100%;
	height:1000px;
	float:left;
	margin:0;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>disable body scroll</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->

</head>

<body>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
            </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

</body>
</html>

Ответ 5

Я считаю, что трюк состоит в том, чтобы сделать позицию BODY относительной, чтобы она не прокручивалась вверху, когда вы ее устанавливали:

BODY {    
    width:100%;
    height:100%;
    overflow:hidden;
    position:relative;    
}

Ответ 6

Попробуйте использовать блокировку прокрутки тела npm.

В основном сочетает решение CS и JS, так что оно работает в iOS и других устройствах, а также в настольных браузерах. НЕ использует position: fixed !

По сути, он блокирует прокрутку тела, сохраняя прокрутку целевого элемента. Исходный код можно найти в репозитории Github.

Вот демо.

Ответ 7

Если вы используете jQuery:

$('body').css('overflow', 'hidden');
$('*').not('body').css('overflow', 'auto');

или:

$('body').css('overflow', 'hidden');
$('body').children().css('overflow', 'auto');