Javascript 防止正文滚动（移动、本机浏览器）_Javascript_Android_Jquery_Html_Css

Javascript 防止正文滚动（移动、本机浏览器）

javascript android jquery html css

Javascript 防止正文滚动（移动、本机浏览器）,javascript,android,jquery,html,css,Javascript,Android,Jquery,Html,Css,在三星Galaxy S5/S6的本机浏览器上，以下CSS： body { overflow: hidden; } 不会阻止主体滚动有解决办法吗编辑：如下所述，这也可以通过向html标记添加overflow:hidden来完成。但这会导致窗口滚动到顶部的问题是否可以防止正文在没有滚动副作用的情况下滚动（一旦html页面滚动到顶部，正文就会溢出：隐藏）？旁注：问题可在以下环境中重现： Samsung Galaxy S5 (Android 5.0) Browser: Native; Sa

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

body {
  overflow: hidden;
}

不会阻止主体滚动

有解决办法吗

编辑：如下所述，这也可以通过向html标记添加overflow:hidden来完成。但这会导致窗口滚动到顶部的问题

是否可以防止正文在没有滚动副作用的情况下滚动（一旦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;

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，正文{溢出：隐藏}
//你的html正文
尝试添加边距：0px！重要信息
关于body元素
我认为您可以简单地使用这个boostrap模式弹出窗口
，只需将粘贴复制到html页面即可

正文{
宽度：100%；
高度：1000px；
浮动：左；
保证金：0；
}

禁用正文滚动
启动演示模式
&时代；
情态标题
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着包括Lorem Ipsum版本的Aldus PageMaker等桌面出版软件的发布而流行
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着包括Lorem Ipsum版本的Aldus PageMaker等桌面出版软件的发布而流行

接近
保存更改
我认为诀窍在于使身体位置相对，以便在设置时不会滚动到顶部：
BODY {    
    width:100%;
    height:100%;
    overflow:hidden;
    position:relative;    
}

试一试
尝试使用npm包
基本上结合了CS和JS解决方案，因此它可以跨iOS和其他设备以及桌面浏览器工作。不使用位置：固定

本质上，它锁定主体滚动，同时保持目标元素的滚动。源代码可以在repo上找到
这是一个。
我尝试了所有的方法，最后我想我找到了答案
将以下内容放入身体：
body {
   overflow: hidden;
   overflow-x: hidden;
   overflow-y: hidden;
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
}

这很有效。某些浏览器似乎忽略了溢出，但可以识别单个的-x和-y值，但仅这些值是不够的。使用“位置固定”方法，将所有4个方向都设置为零，这将使所有方向都按预期工作。如果我将overflow:hidden添加到html，窗口将滚动到顶部。有什么方法可以避免这种情况吗？你可以在正文中添加滚动div并处理滚动顶部。你可以发布一个你想要的示例吗？我对这个问题很熟悉。当我添加html:overflow:hidden（模态打开）时，我的背景（主体）会滚动到顶部。我想知道我是否可以避免滚动的副作用。我猜你用onclick事件打开了模态，对吗？知道这有什么帮助吗？为什么是零，为什么重要？它可以在桌面浏览器上工作，也可以在chrome mobile上工作，其他的都不知道。
<html>
    <head>
        <style>
            html,body{overflow:hidden}
        </style>    
    </head>
    <body>
        // You html body
    </body>
</html>

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

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

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