【问题标题】：Prevent body from scrolling (mobile, native browsers)防止正文滚动（移动、本机浏览器）
【发布时间】：2016-09-08 00:39:09
【问题描述】：

在三星 Galaxy S5 / S6 的原生浏览器上，以下 CSS：

body {
  overflow: 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;

【问题讨论】：

标签： javascript android jquery html css

【解决方案1】：

试试

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

【讨论】：

在桌面浏览器上运行，在chrome移动上运行，不知道其他的。

【解决方案2】：

Css + Javascript 解决方案：

css 类禁用滚动

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

应用css类后修复scrollTop跳转的javascript代码：

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;；

示例：

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

在移动浏览器中禁用滚动

您还需要为<html> 标签设置overflow:hidden。

示例：

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

【讨论】：

如果我添加溢出：隐藏到 html，窗口滚动到顶部。有没有办法避免这种情况？
你可以在 body 中添加你的滚动 div 并处理滚动顶部
你能发布一个你想要的例子吗？我对这个问题很熟悉。
当我添加 html:overflow:hidden（模态打开）时，我的背景（正文）滚动到顶部。我想知道我是否可以避免滚动的副作用。
我猜你用 onclick 事件打开了模态框，对吧？

【解决方案3】：

我认为您可以简单地使用此 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's 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's 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>

【讨论】：

【解决方案4】：

我相信诀窍是使 BODY 位置相对，以便在设置时它不会滚动到顶部：

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

【讨论】：

【解决方案5】：

尝试在正文元素上添加margin:0px !important

【讨论】：

知道这有什么帮助吗？为什么是零，为什么重要？

【解决方案6】：

尝试使用 npm 包body-scroll-lock。

基本上结合了 CS 和 JS 解决方案，因此它可以在 iOS 和其他设备以及桌面浏览器上运行。不使用position: fixed！

本质上，它会在保持目标元素滚动的同时锁定正文滚动。源代码可以在Github repo 上找到。

这是demo。

【讨论】：

【解决方案7】：

我尝试了所有方法，最终我认为是。

将以下物品放入您的身体：

body {
   overflow: hidden;
   overflow-x: hidden;
   overflow-y: hidden;
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
}

这行得通。似乎某些浏览器会忽略溢出，但会识别单独的 -x 和 -y 值，但仅凭这些值是不够的。使用将所有 4 个方向设置为零的位置固定方法可以使其按预期工作。

【讨论】：