CSS技巧：移动端弹出层滑动时禁止底层滑动

雅兮网更新于 2018-03-11 21:18:30首发于 2018-03-14 07:35:292.3K

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

CSS技巧：移动端弹出层滑动时禁止底层滑动-第1张-boke112百科(boke112.com)

可以试下我的这个小 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 样式，不然页面就无法滚动了哦。

上面那个 DEMO1 处理过就可以实现弹出层时，弹出层滑动底层不滑动，隐藏弹出层后底层页面恢复滚动的效果。具体直接点击查看DEMO2。

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

PS：具体如何通过 js 动态给 html 和 body 标签加一个 class=“noscroll”样式，请参考 DEMO2 的源代码学习折腾。这里就直接给大家贴出针对 DEMO2 的 JS 代码给大家参考。

<script type=“text/javascript”>
jQuery(document).ready(function() {
$(“.button”).click(function() {
var $btn_txt=$(“.button”).text() ;
if ($btn_txt == “显示导航”) {
$(“.button”).text(‘隐藏导航’);
};
if ($btn_txt == “隐藏导航”){
$(“.button”).text(‘显示导航’);
}
$(“.nav”).slideToggle();
$(“.mask”).slideToggle();
});
});
jQuery(document).ready(function() {
$(“.button”).click(function() {
$(“html,body”).toggleClass(‘noscroll’);
});
})
</script>

CSS技巧：移动端弹出层滑动时禁止底层滑动

相关文章

最新文章

热门标签