CSS禁止移动端弹出层后底层滑动

2018-1-10 18:29 来自本站原创 12,200 8 5
[摘要]

在开发移动端项目的时候,有时候会遇到弹出层下方的内容随滑动滚动的情况,我们可以通过css来控制,让体验更合理。

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

CSS禁止移动端弹出层后底层滑动

可以试下我的这个小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

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

本文最后更新于2018年1月11日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助微信扫一扫赞助

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属 雅兮网 所有,欢迎转载,但务请注明出处;
    目前评论:8   其中:访客  0   博主  0
    加载中...
    1. 姜姜 1
      5年前 (2018-11-08) 0楼

      怎么能让底层不回到顶部呢

    2. 6年前 (2018-01-13) 0楼

      连这个东东都研究到,太牛了 [鼓掌]

    3. 6年前 (2018-01-11) 0楼

      厉害了我的哥 [强] [强] [强]

    4. 6年前 (2018-01-11) 0楼

      厉害呀,博主是个CSS大咖呀!牛! [偷笑]

    5. 6年前 (2018-01-10) 0楼

      虽然我不懂,但还是为你码那么多字点个赞?

    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    分享 8 5 12,200
    Top