DIY博客园

在开发移动端网站的时候，我们经常会遇到弹出层的情况（如全屏的导航栏、提示遮罩等），这时候会有一个用户体验上的小bug：当我们操作点出弹出层时，如果此时滑动屏幕，你会发现弹出层下面的内容依然会上下滚动；特别是弹出层是导航列表等较长需要上下滑动的区块时，你会发现弹出层和底层有时会一起滚动，这种体验非常违和啊。

可以试下我的这个小demo，显示导航后，上下滚动会导致下面的内容也滚起来。

直接点击查看DEMO1

那该怎么办呢？实际上只需要一段小小的css就能解决，那就是给html和body添加一个样式

html,body{height: 100%;overflow: hidden;}

可以从上述代码看出将html和body高度设为100%；将其overflow属性设为超出隐藏hidden，此时的页面底层就无法滚动了。

具体方法，我们可以通过js动态给html和body标签加一个class=“noscroll”样式，然后在样式表添加

.noscroll{height: 100%;overflow: hidden;}

记得隐藏弹出层后，要去掉noscroll样式，不然页面就无法滚动了哦

上面那个demo处理过就可以实现弹出层时，下面不滚动，隐藏弹出层后底层页面恢复滚动

直接点击查看DEMO2

之后就使用户体验更加合理流畅了