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

投稿   雅兮网  2018-03-14 07:35:29  1,318 人阅读  21 条评论

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

CSS技巧:移动端弹出层滑动时禁止底层滑动 海纳百川 第1张

可以试下我的这个小 demo,显示导航后,上下滚动会导致下面的内容也滚起来。直接点击查看DEMO1

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

  1. html,body{
  2. height: 100%;
  3. overflowhidden;
  4. }

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

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

  1. .noscroll{
  2. height: 100%;
  3. overflowhidden;
  4. }

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

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

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

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

  1. <script type="text/javascript">
  2.     jQuery(document).ready(function() {
  3.         $(".button").click(function() {
  4.             var $btn_txt=$(".button").text() ;
  5.             if ($btn_txt == "显示导航") {
  6.                 $(".button").text('隐藏导航');
  7.             };
  8.             if ($btn_txt == "隐藏导航"){
  9.                 $(".button").text('显示导航');
  10.             }
  11.             $(".nav").slideToggle();
  12.             $(".mask").slideToggle();
  13.         });
  14.     });
  15.     jQuery(document).ready(function() {
  16.         $(".button").click(function() {
  17.             $("html,body").toggleClass('noscroll');
  18.         });
  19.     })
  20. </script>

您可能感兴趣的文章

如果文章对你有帮助,请赞赏支持作者继续创作!

文章标签: ,   ,   ,  
原文地址:https://www.yaxi.net/2018-01-10/1655.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 雅兮网 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
©boke112导航,本站推荐使用:阿里云 ECS服务器等云产品服务,国外免备案主机建议使用:老薛主机
雅兮网

 发表评论

强表情无奈表情抠鼻表情笑哭表情偷笑表情衰表情流汗表情奋斗表情吐血表情抓狂表情晕表情流泪表情疑问表情呲牙表情惊讶表情鼓掌表情

  1. 雅兮网
    雅兮网 @回复

    老古是真能翻啊,这文章也翻出起来了,当时写这个是在公司项目上遇到的,但是好像跟移动设备有很大关系,有的手机好像无解的~~

    • 懿古今
      懿古今2018-03-19 17:23  回复

      @雅兮网因为这个情况我就遇到过,移动端导航菜单滚动时,底层页面也跟着滚动,你这篇文章还是挺有帮助的 [呲牙]

  2. 明月清风
    明月清风 @回复

    博主评论头像何时变了颜色了!

  3. 悦色
    悦色 @回复

    要动手的 [哈欠]

  4. 西枫里博客
    西枫里博客 @回复

    膜拜前端大佬雅兮~ [威武]

  5. 麦林风
    麦林风 @回复

    变成自己想要的,还需要修改。

  6. 清风小墨
    清风小墨 @回复

    移动端是大头 [给力]

  7. 姜哥说
    姜哥说 @回复

    我的站反应太慢了,不行了。

  8. 橘子书
    橘子书 @回复

    前端dalao雅兮!

  9. 夏天烤洋芋
    夏天烤洋芋 @回复

    [阴险] 不明觉厉的感觉。然而并不知道怎么添加。 [偷笑] 希望主题极简到灵魂深处才好。

  10. 陈鑫威博客
    陈鑫威博客 @回复

    看不懂css路过,不过学习了。

  11. 心动科技
    心动科技 @回复

    这个收藏了~3Q

  12. 宋子宪博客
    宋子宪博客 @回复

    不错,学习了

  13. 广告联盟
    广告联盟 @回复

    刚看了DEMO,这个如果导航数量不多,我感觉不用也可以,导航数量一多的话,这个方法蛮实用的。 [亲亲]

    • 懿古今
      懿古今2018-03-14 13:57  回复

      @广告联盟是的,不过移动端建议菜单不要太多,过多的话使用本文的技术对于用户体验非常好

  14. 薅羊毛
    薅羊毛 @回复

    看不懂啊 真的好难

  15. 靠谱学生兼职网
    靠谱学生兼职网 @回复

    分享的知识确实不错哦

  16. 沈唁志
    沈唁志 @回复

    做PHP开发的我表示前端css js知识已经忘得差不多了

  17. 小苍老师
    小苍老师 @回复

    已经收藏,说不定什么时候就用上了!

  18. 明月登楼
    明月登楼 @回复

    好吧,一看到CSS就蒙圈的路过!

  19. 钟水洲博客
    钟水洲博客 @回复

    我也有发现过很多网站都有这个问题