防止身体滚动(移动,本机浏览器)

Question

防止身体滚动(移动,本机浏览器)

Too*_*ool 13 html javascript css jquery android

在三星Galaxy S5/S6的原生浏览器上,下面是一块CSS:

body {
  overflow: hidden;
}

Run Code Online (Sandbox Code Playgroud)

不会阻止身体滚动.

这有解决方法吗？

编辑:如下所述,这可以通过添加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;

Run Code Online (Sandbox Code Playgroud)

Answer 1

DrE*_*est 5

尝试

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

Dav*_*oon 1

CSS + JavaScript 解决方案：

禁用滚动的 css 类

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

Run Code Online (Sandbox Code Playgroud)

应用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);
}

Run Code Online (Sandbox Code Playgroud)

禁用按目标元素滚动

索引.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>

Run Code Online (Sandbox Code Playgroud)

避免因单击事件触发而滚动到顶部

必须return false;在点击事件之后添加；

例子：

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

Run Code Online (Sandbox Code Playgroud)

禁用移动浏览器中的滚动

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

例子：

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，8 月前
查看次数：	3246 次
最近记录：	8 年，3 月前