移动菜单打开时,body的滚动锁不起作用是因为移动菜单通常是通过添加一个遮罩层或者改变body的样式来实现的,而滚动锁的原理是通过设置body的overflow属性为hidden来禁止滚动。但是由于移动菜单的遮罩层或者样式改变会覆盖在body上面,导致滚动锁失效。
解决这个问题的方法有多种,以下是一些常见的解决方案:
- 使用JavaScript:可以通过JavaScript来监听移动菜单的打开和关闭事件,在菜单打开时,动态给body添加一个class,并设置overflow属性为hidden,禁止滚动;在菜单关闭时,移除该class,恢复滚动。
- 使用CSS:可以通过CSS的position属性来实现滚动锁。在移动菜单打开时,给body添加一个class,并设置position为fixed,同时设置top和left属性为0,使body固定在页面上,从而禁止滚动;在菜单关闭时,移除该class,恢复滚动。
- 使用第三方库:可以使用一些专门用于解决滚动锁问题的第三方库,例如body-scroll-lock。这些库提供了简单的API来控制滚动锁,可以方便地解决移动菜单打开时滚动锁失效的问题。
总结起来,解决移动菜单打开时body的滚动锁不起作用的方法有多种,可以通过JavaScript或CSS来实现,也可以使用第三方库来简化操作。具体选择哪种方法取决于项目需求和个人偏好。