解决弹出遮罩层后手机移动端屏幕仍滚动的问题

  • A+
所属分类:CSS

这两天在做网站的时候,点击按钮打开侧边栏的时候,同时弹出一个遮罩层。在PC端的浏览器里很完美,页面是不能滚动的,但在手机移动端,无论是安卓还是苹果都是可以滚动了。这样就不太完美了。

如何解决呢?查找了很多资料。不多说了,直接上答案。

首先,在CSS中定义如下代码:

其次,触发点击事件后,需要给<body>添加一个样式,比如起个名叫active

再次,在CSS中定义一个body.active的样式:

最后,在js中给遮罩层添加一个阻止触摸滚动的方法:

完美解决。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: