logo标签列表

防止页面在移动设备上滚动（原生浏览器）

javascriptandroidjqueryhtmlcss
14

在三星 Galaxy S5 / S6 的原生浏览器中，下面的 CSS 代码：

body {
  overflow: hidden;
}

不阻止页面滚动。

有解决方法吗？

编辑：如下方所讨论，可以通过将overflow:hidden添加到html标记中来实现。 但是这会引入一个问题，即窗口滚动到顶部。

是否有可能防止身体滚动而不产生滚动副作用（当html，body被设置为overflow：hidden时，页面向顶部滚动）？

附注：此问题可在以下环境中复现：

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;
7个回答
5
尝试
body {
    overflow:hidden;
    position:fixed;
    top:0;
    bottom: 0;
}
它适用于桌面浏览器，也适用于Chrome移动版，其他的我不确定。 - Single Entity
1

我认为你可以使用这个 Bootstrap 模态框弹出窗口，只需将其复制粘贴到 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>

1

我认为诀窍在于将BODY位置设为相对位置，这样当你设置它时，它就不会滚动到顶部：

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

Css + Javascript 解决方案：

禁用滚动的 CSS 类

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

JavaScript代码用于修复应用CSS类后的scrollTop跳动：

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中添加overflow:hidden，窗口会滚动到顶部。有没有避免这种情况的方法？ - Tool
你可以将滚动条的 div 放置在 body 内，并处理滚动条的位置。 - David Antoon
你能否提供一个你想要的例子？我对这些问题很熟悉。 - David Antoon
只需简单地将overflow: hidden添加到html标记中，即可将身体滚动到顶部，而无需单击事件。您可以自己尝试一下。我开始认为这是（滚动问题）最好的解决方法。 - Tool
请看最后一次编辑，我添加了两个选项来处理滚动事件。 - David Antoon
显示剩余6条评论
0
尝试在body元素上添加margin:0px !important。
这有什么帮助吗？为什么是零，为什么很重要？ - dakab
0

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

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

本质上，它锁定了主体滚动，同时保持目标元素的滚动。源代码可以在Github存储库中找到。

这里有一个demo。

0

我尝试了一切，最终我想通了。

将以下内容放入你的 body 中：

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

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接