Javascript 防止移动设备上的正文滚动

当模态出现时，如何停止滚动正文并允许固定div滚动？我试过了，但我应付不了。有解决办法吗

<div class="search">
   <input type="text" placeholder="search here" class="searchMe">
</div>
<div id="modal"></div>
<div class="result">
   <ul>
      <li>Result from type</li>
      <!-- Live example have lot of items -->
   </ul>
</div>
<div class="content">
   Many items will be place here
</div>

由类型引起的结果

许多物品将放在这里

这是我正在工作的链接

这是给你的

---

我尝试了

-webkit溢出滚动：auto

和

body

样式，使用

溢出：hidden

打开时将内容高度更改为100%，并设置溢出：0；我会成功的。因此，编写一个具有

.no-scroll {height:100%; overflow:0;}

然后使用jQuery在输入具有焦点时添加该类，并在用户离开焦点时删除该类

这是一个示例，请注意，您必须以整页的形式查看代码段，才能看到“否”滚动条。您还必须解决Touch Move for ios是您的一个代码笔，它可以满足您的需要

jQuery（文档）.ready（函数（）{
var字段=$（“.searchMe”）；
field.keypress（函数（）{
$（“#模态”）.show（）；
$（'.content'）.addClass（'no-scroll'）//添加类
$（“.result”）.show（）；
});
field.blur（函数（）{
$（“#模态”）.hide（）；
$（“.result”）.hide（）；
$（'.content'）.removeClass（'no-scroll'）//删除类
});
});
*{
保证金：0；
填充：0；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
&：：之前，
&：：之后{
-webkit框大小：继承；
-moz盒大小：继承；
框大小：继承；
}
}
身体{
背景：#e6e4；
}
.内容{
填充顶部：60px；
宽度：100%；
高度：1800px；
背景：深色（15%）；
}
//搜寻
.搜索{
位置：固定；
排名：0；
z指数：2；
高度：50px；
宽度：100%；
背景：#eee；
输入{
宽度：100%；
身高：100%；
边框：1px实心#374c45；
字体大小：16px；
填充：0.1em；
}
}
#模态{
显示：无；
位置：固定；
排名：0；
宽度：100%；
身高：100%；
z指数：1；
背景：rgba（0,0,0,0.6）；
}
.结果{
显示：无；
位置：固定；
z指数：2；
顶部：50px；
底部：0；
宽度：100%；
溢出y：滚动；
背景：透明；
}
/*类停止滚动*/
.no滚动{溢出：隐藏；高度：100%；}


由类型引起的结果
由类型引起的结果
由类型引起的结果
由类型引起的结果
由类型引起的结果
由类型引起的结果
由类型引起的结果
由类型引起的结果
由类型引起的结果
由类型引起的结果
由类型引起的结果
由类型引起的结果
由类型引起的结果
由类型引起的结果
由类型引起的结果
由类型引起的结果
由类型引起的结果
由类型引起的结果
由类型引起的结果
由类型引起的结果

许多物品将放在这里
这是您需要的吗



var-winPos；
$（'.searchMe'）。按键（函数（）{
winPos=$（window.scrollTop（）；
$（'html'）.addClass（'modal-open'）.css（'top'，-winPos+'px'）；
$（'模态'）.addClass（'打开'）；
});
$（'#model，.close'）。单击（函数（）{
$（'#model'）。removeClass（'open'）；
$（'html'）.removeClass（'modal-open'）.removeAttr（'style'）；
$（窗口）.scrollTop（winPos）；
});
$（'.modal content'）。单击（函数（事件）{
event.stopPropagation（）；
});
html{
身高：100%；
最大高度：100%；
}
html.modal-open{
位置：固定；
宽度：100%；
溢出x：隐藏；
溢出y：自动；
z指数：1；
右边填充：17px；
}
#模态开放{
显示：块；
}
#模态{
显示：无；
背景色：rgba（0,0,0,0.4）；
位置：固定；
左：0；
右：0；
排名：0；
底部：0；
溢出y：自动；
溢出x：隐藏；
z指数：2；
-webkit溢出滚动：触摸；
}
.模态内容{
背景色：#fff；
高度：100px；
宽度：300px；
保证金：50px自动；
}


许多物品将放在这里
模态内容
检查此项，只需在正文中添加
溢出：隐藏
，即可工作。我遗漏了什么吗？顺便说一句，你需要在你的手机上测试这个例子。我标记了
ios
tag它仍然是一样的。我以为这是浏览器缓存问题，但事实并非如此。但您的示例在android设备上运行良好。我发现body具有
scroll=“auto”
属性。我将其更改为
scroll=“none”
，但这可能是相同的，可能只是
iOS
的问题。这是由于触摸移动，您需要在需要停止滚动时实现禁用它的方法。如果您修改使用我留下的touchmove的脚本来处理代码，那么它是可用的。