JQuery弹出菜单时禁止页面（body）滚动

最近在做手机端的弹出菜单，但是菜单弹出来后滑动手机屏幕的话页面滚动总是会将菜单滑上去，体验非常不好，所以查了一下弹出菜单时禁止页面滚动的方法，整理如下：

方法一：弹出菜单时给body和html添加一个css样式：height:100%;overflow:hidden;弹出层消失再去掉这个类。(只给body添加样式在安卓机上无效果)

css代码：.add{height:100%;overflow:hidden;}

JQuery代码：弹出菜单时给body添加类（.add）

$('body,html').addClass('add');

菜单隐藏时给body去除add类

$('body,html').removeClass('add');

这种方法在弹出菜单时body会回到顶部，所以对这种效果不要求的话可用。

解决：弹出层出现时给body添加样式position:fixed，并算出当时页面的scrollTop滚动值，给body一个负的top值来保证body不会回到顶部，弹出层消失时恢复。

方法二：定位层之间好像是不会传递事件的，将弹窗之外的元素包在一个div里，给这个div设置定位样式，给宽高是充满屏幕的，设置overflow:auto;这样这个div和弹出层就是两个定位层，滑动弹出层时不会传递到div上的。固定div的高度是屏幕的高度，overflow:auto使滚动发生在div内部，这样弹出层的滚动就不会传递给div了,如果不给设置高度，弹出层的滚动事件仍然会传递给body，div就会随着body滚动。

这种方法在iphone手机上效果不是太好。

方法三：在需要滚动的元素上加上-webkit-overflow-scrolling : touch；

效果待验证。

转载于:https://www.cnblogs.com/maxiaocang/p/9954410.html

JQuery弹出菜单时禁止页面（body）滚动相关推荐

js实现弹出框时禁止页面滚动，关闭弹出框时恢复页面滚动
$(function () {$('#pingtai').click(function () {if($('#serviceDes').css('display','none')){$('#servi ...
移动端弹出遮罩层禁止页面滚动，遮罩里面的框允许滚动如何实现。
因为有的弹窗上面有滑动,但是滑动部分滑动时会带动底下的页面滚动,如何解决? 1.弹窗弹起时 activityAgreement:function(){vm.agreementsDailog=true; ...
showdialog wpf 如何关闭_WPF用ShowDialog()弹出窗体时控制该窗体的显示位置,并传值回父窗体...
原文:http://blog.csdn.net/kiss0622/article/details/5852153 方法一: 1.父窗口代码 Window1.xaml.cs private void B ...
flutter向上动画弹出菜单效果
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. 重要消息[视频教程感兴趣的伙伴可以瞅瞅] 本文章最后的效果如下: 如上图的效果,当点击菜单按钮时,子菜单向上动画弹出,然后当点击弹出 ...
Vue出现弹出层时，禁止底部页面跟随滑动
背景:最近在写一个vue项目,当出现弹出层时,发现底部页面跟随滚动,但是产品不想要这种效果,于是找各种资料,发现很多说法,但是试了试,发现有的根本就不行,比如说有人提出用vue中提供的@touchmo ...
vue中禁止页面滚动/滚动事件穿透-弹出蒙版时弹出层下面还可以滚动问题解决
弹出层时,蒙版下还可以滚动页面移动端在蒙层所在div上加 @touchmove.prevent <div class="maskBox" @touchmove.preve ...
jquery底部弹出菜单_带有jQuery的新鲜底部滑出菜单
jquery底部弹出菜单 View demo 查看演示Download Source 下载源 In this tutorial we will create a unique bottom slide ...
向上弹出菜单jQuery插件
插件名:柯乐义英文名:Keleyi js文件名称:jquery.keleyi.js 插件功能:该插件可以让你轻易地在页面上构建一个向上弹出的二级菜单. 支持浏览器: keleyi 0.1.4版本支持 ...
vb屏蔽文本框点右键时的弹出菜单
----------以下代码在模块程序代码: Option Explicit Public Declare Function SetWindowLong Lib "user32" ...

JQuery弹出菜单时禁止页面（body）滚动

JQuery弹出菜单时禁止页面（body）滚动相关推荐

最新文章

热门文章