首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

移动菜单打开时body的滚动锁不起作用

移动菜单打开时,body的滚动锁不起作用是因为移动菜单通常是通过添加一个遮罩层或者改变body的样式来实现的,而滚动锁的原理是通过设置body的overflow属性为hidden来禁止滚动。但是由于移动菜单的遮罩层或者样式改变会覆盖在body上面,导致滚动锁失效。

解决这个问题的方法有多种,以下是一些常见的解决方案:

  1. 使用JavaScript:可以通过JavaScript来监听移动菜单的打开和关闭事件,在菜单打开时,动态给body添加一个class,并设置overflow属性为hidden,禁止滚动;在菜单关闭时,移除该class,恢复滚动。
  2. 使用CSS:可以通过CSS的position属性来实现滚动锁。在移动菜单打开时,给body添加一个class,并设置position为fixed,同时设置top和left属性为0,使body固定在页面上,从而禁止滚动;在菜单关闭时,移除该class,恢复滚动。
  3. 使用第三方库:可以使用一些专门用于解决滚动锁问题的第三方库,例如body-scroll-lock。这些库提供了简单的API来控制滚动锁,可以方便地解决移动菜单打开时滚动锁失效的问题。

总结起来,解决移动菜单打开时body的滚动锁不起作用的方法有多种,可以通过JavaScript或CSS来实现,也可以使用第三方库来简化操作。具体选择哪种方法取决于项目需求和个人偏好。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

移动端浏览器和微信浏览器上禁止body滚动

一般禁止body滚动做法就是设置overflow:hidden。...但是很奇怪发现在移动端浏览器和微信浏览器上这个不起作用,然后我分析了我写法,就是在body上加了一个class去定义属性,然后改成标签定位,如body{overflow:hidden;},这个实现是可以...再进一步分析,如果要用class去实现没有滚动条,如下代码设置: .index_body { overflow-y: hidden;/*为了兼容普通PC浏览器*/ height: 100%...2、给要滚动元素添加一个父级,设定高度,overflow:auto。 3、html,body{height:100%;overflow:hidden}。...').addClass('index_body');//添加禁止滚动样式 }else{ $('body').removeClass('index_body');//去除禁止滚动样式 }

2.9K10

【Linux 内核】编译 Linux 内核 ④ ( 打开 Linux 内核编译 菜单配置 |菜单配置中光标移动与选中状态 | 保存配置 | 配置项帮助文档 )

文章目录 一、打开 Linux 内核编译 菜单配置 二、菜单配置中光标移动与选中状态 三、保存配置 四、配置项帮助文档 一、打开 Linux 内核编译 菜单配置 ---- 执行 make menuconfig...命令 , 弹出菜单配置 ; 二、菜单配置中光标移动与选中状态 ---- 其中左侧 * 表示选中状态 , 通过 上下箭头 按键 , 可以上下移动光标 , 按下 空格 按键 , 可以切换 选中 / 取消选中...点击 OK , 继续下一步 , 保存完成 , 选择 Exit 退出 ; 内核编译配置保存在了 .config 文件中 ; 四、配置项帮助文档 ---- 在菜单配置中 , 可以选择裁剪一些内核模块..., 内核越小 , 运行速度越快 ; 上面的内核编译选项 , 如果不清楚细节 , 暂时按照默认配置编译即可 ; 如果想要了解某一项配置具体作用 , 选中指定项 , 如 : 按下 " Shift +..." 按键 , 即可跳转到新页面 , 其中有详细解释该选项作用 , 如下图 :

2.2K20
  • 自适应页面高度

    困扰了我很久问题:我很想让一个框架左侧菜单(控件或者是折叠LI或者别的),能够自动适应浏览器变化。因为即使是同一分辨率,页面中实际高度也不同。...基本上是这两类:       1、页面中嵌了IFrame,希望Iframe不出现滚动条,大小刚刚和页面大小一样,这个基本方法,都是用页面的document.body.scrollHeight属性来完成...其实我也是用Iframe,因为我折叠菜单是用css+div实现,没法用滚动条,所有我用一个Iframe来装它,当菜单过长,由Iframe来显示滚动条。... } 参考:控制IFrame大小,不显示滚动方法 使用JS代码,方法有二:     1。    ...     方法二是一种不错办法,但由于不需要和主页面通信,当主页面显示速度很快,嵌入式页面的JS代码可能不起作用

    2.7K70

    Mac 常用快捷键与操作

    文章目录 1.前言 2.快捷键 窗口管理 程序管理 访达快捷键 网页快捷键 编辑 截屏 系统快捷键 屏、睡眠、重启、关机、退出登录 跳转 其他 3.手势 4.常用操作 MAC 访问根目录 MAC 打开命令行....手势 单指: 轻触滑动:相当于鼠标移动 按压一次:相当于鼠标单击 按压两次:相当于鼠标双击 按压不放滑动:可实现拖动 中间停顿按压两次:重命名 双指: 双指上下滑动:上下滚动页面动 双指左右滑动:前进后退...(2)桌面菜单栏点击“前往 > 实用工具 > 终端”,或键入快捷键 Command + Shift +U 打开实用工具。 (3)访达内搜索应用程序“终端”。 (4)打开启动台,进入“其他”找到终端。...MAC 卸载程序 一般有如下两种方法: (1)进入启动台找到要卸载程序图标,长按左键或 option 键,当图标开始摇晃,有些程序上角出现×,此时点击×即可卸载应用了。...选择其中任意一个屏幕角设置为“桌面”,那么将鼠标移动至对应屏幕角用,就会触发刚才设置,执行“回到桌面”操作。

    3.7K20

    把笔记本触摸板用起来

    大部分笔记本用户对于触摸板都是当作没有鼠标一个替代品,但是现在windows触摸板內置了不少快捷功能,比自己去鼠标找然后点击效率会高一点,如果没有外接键盘,双手随便可以触碰到的话,使用触摸板会把体验提升一个档次...单指单,双击和滑动 这是我们使用最多一个情景了,平时用来移动鼠标,选中,打开文件 双指操作 双指操作可以模拟鼠标的滚轮 双指左右,上下移动 当页面存在滚动条或者打开了图片查看器,可以触发滚动屏幕或者查看下一张图片...双指点击 : 模拟鼠标右键 双指收缩放大 模拟缩放和放大情景,可以在浏览器中,触摸板双指缩放和放大,可以使页面进行缩放和放大 三指操作 三指点击: 呼出windows自带搜索菜单...窗口操作 全屏或缩放窗口 : 双击窗口标题栏 拖动窗口 : 双击窗口,第二次双击后不要松开,移动手指即可拖动窗口 Win快捷键使用 WIN : 显示/隐藏菜单 WIN + D : 显示桌面...WIN + M : 最小化所有窗口 WIN + SHIFT + M : 还原最小化窗口 WIN + E : 打开资源管理器 WIN + L : 屏 WIN + R : 呼出运行 WIN

    1.7K42

    htop(1) command

    删除不需要 Linux 功能。在严格模式下,由于功能较少,终止、更改进程优先级和读取进程延迟记帐信息等功能将不起作用。...l 显示进程打开文件:如果安装了 lsof(1),按下此键将显示该进程打开文件描述符列表。 w 在单独屏幕上显示选定进程命令行,必要换行。...x 在单独屏幕上显示选定进程活动文件。 帮助和设置 F1, h, ? 转到帮助屏幕。...使用移动,“跟随”效果会失效。 隐藏选项和刷新 K 隐藏内核线程:阻止显示属于内核线程。...其他功能 数字:PID搜索:输入进程ID,选择高亮将移动到该进程。 5.示例 (1)基本使用。 打开终端,输入 htop,即可启动 htop 程序。

    11510

    JavaScript代码获取浏览器可视高、文档滚动高和滚动距离

    可以在浏览器 F12 打开控制台里进行测试,我这显示 368 ,用微信截图移动到可视区域可以看到高度正好是 368 。...如果测试,发现页面有滚动条,但是获取滚动高度和可视高度一样,要注意看滚动条是不是 iframe 内嵌框架里,上面可以进行切换,默认 top 是默认最外层框架。...实例演示 把这段代码保存为本地 html 文件,再用浏览器打开可以更具体感知。 <!...var clientHeight = document.body.clientHeight; window.innerHeight 浏览器窗口视口高度,不包括浏览器工具栏、菜单栏等。...var scrollHeight = document.body.scrollHeight; document.body.scrollTop 文档 元素垂直滚动距离,即从顶部到滚动距离

    24700

    CSS笔记

    :#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ a:active {color:#0000FF;} /* 鼠标点击...relative(相对定位),其位置相对其正常位置。相对定位元素经常被用来作为绝对定位元素容器块。 fixed,元素位置相对于浏览器窗口,是固定位置。即使窗口是滚动它也不会移动。...sticky(粘性定位),基于用户滚动位置来定位,在未滚动出目标区域,它行为就像position:relative;它表现就像 position:fixed;,它会固定在目标位置。...hidden 内容会被修剪,并且其余内容是不可见。 scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余内容。 auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余内容。...> 下拉菜单 鼠标移动到按钮上打开下拉菜单

    1.9K20

    Mac下快捷键收集整理

    点击可拍下当前窗口或菜单或Dock以及图标等,只要将照相机图标移动到不同区域(有效区域会显示为浅蓝色)点击      Command + Shift + Control + 4 :再按空格键:将选取窗口或其他区域快照保存到剪贴板...打开应用程序-实用工具-钥匙串访问-点左上角钥匙串访问-进入偏好设置-然后在(在菜单栏中显示状态)前面打勾-完成后右上角会出现一把钥匙图标-这就完成了 但必须你电脑设置了密码 设置密码在(系统偏好设置...设置了钥匙串访问后,再配合 expose 就可以实现鼠标移动到一个活动区域后,自动进入屏幕保护,然后恢复屏幕保护时候要求输入密码。从而达到目的。 10、关于剪切。...+X,有的时候不起作用,原因是苹果认为剪切功能会在用户忘了粘贴导致文件丢失。...如果不像保留,就想直接移动到U盘里,可以在拖拽文件,按住Command,这时鼠标旁边+就消失了,表示要移动而不是复制,否则默认是有+符号,创建一个副本。

    1.2K50

    品优购电梯导航案例

    ,就可以拿到当前小模块索引号 就可以把animate要移动距离求出来:当前索引号内容区模块它offset().top 然后执行动画即可 当我们点击电梯导航某个小li, 当前小li...实现代码: // 电梯导航 $(function () {    // 每次点击都会执行滚动动画,滚动又会触发添加current类 此时需要节流阀(互斥)控制    // 节流阀    var...不用等到滚动屏幕才显示隐藏    toggleAside(); ​    function toggleAside() {        // 滚动到相应位置显示电梯导航栏        if...,对应小li添加current类名        // 节流阀打开才执行里面代码        if (flag) {            // 遍历每个内容元素,获得索引号            ...,body").stop().animate({            scrollTop: current       }, function () {            // 执行完动画滚动打开节流阀

    1.6K30

    【WebApp开发必知】移动游览器私有Meta属性

    Meta属性在移动端可以说是不得不知道使用得非常频繁技术。下面就给大家整理一下在移动各大浏览器一些私有的Meta属性。 一、Safari浏览器私有 Meta 属性 <!...; 2.在ios上,用户将网页添加到主屏后,再从主屏幕打开这个网页,可以隐藏浏览器地址栏和下面的toolbar; 3.其值有三个: default(白色)black(黑色) black-translucent...4.开启对web app程序支持 5.是指在发送到屏幕时候默认命名。 6.让网页在加载便可隐藏顶部地址栏与底部导航栏。 二、QQ浏览器私有 Meta 属性(x5内核定制标签) <!...5.nightmode值设置为disable后,浏览器夜间模式就不起作用。 6.UC 浏览器为了节省流量,为用户提供了无图模式。...Meta属性就介绍到这里,这是移动互联网时代,随着HTML5到来,各大浏览器对HTML5支持也有了很大飞越,对于我们来说移动就是未来,就是未来我们大显神威好地方。

    1.8K20

    http请求发生了两次:options请求分析,移动端开发样式重置

    body上加此属性,这样就保证body点击区域效果一致了2.outline:none(1)在pc端为a标签定义这个样式目的是为了取消ie浏览器下点击a标签出现虚线。...ie7及以下浏览器还不识别此属性,需要在a标签上添加hidefocus="true"(2)input,textarea{outline:none}  取消chrome下默认文本框聚焦样式(3)在移动端是不起作用...-webkit-touch-callout-webkit-touch-callout:none; // 禁用长按页面弹出菜单(iOS下有效) ,img和a标签都要加7....-webkit-overflow-scrolling-webkit-overflow-scrolling:touch;// 局部滚动(仅iOS 5以上支持) 1、Meta 之 viewport说到移动平台...content有两个值”yes”和”no”,当我们需要显示工具栏和菜单,这个行meta就不用加了,默认就是显示。

    98200

    中高级前端必须注意40条移动端H5坑位指南 | 网易三年实践

    在一个滚动容器里,打开弹窗就隐藏滚动条,关闭弹窗就显示滚动条,来回操作会让屏幕抖动起来。提前声明滚动容器padding-right为滚动条宽度,就能有效消除这个不良影响。...body { padding-right: calc(100vw - 100%); } 禁止长按操作 有时不想用户长按元素呼出菜单进行点链接、打电话、发邮件、保存图片或扫描二维码等操作,声明touch-callout...import Fastclick from "fastclick"; FastClick.attach(document.body); 禁止滑动穿透 移动端浏览器里出现弹窗,若在屏幕上滑动能触发弹窗底下内容跟着滚动...弹窗打开后内部内容无法滚动 弹窗关闭后页面滚动位置丢失 Webview能上下滑动露出底色 当打开弹窗给声明position:fixed;left:0;width:100%并动态声明top。...在输入框聚焦获取页面当前滚动条偏移量,在输入框失焦赋值页面之前获取滚动条偏移量,这样就能间接还原页面滚动条偏移量解决页面高度坍塌。

    4.3K22

    移动端H5坑位指南

    在一个滚动容器里,打开弹窗就隐藏滚动条,关闭弹窗就显示滚动条,来回操作会让屏幕抖动起来。提前声明滚动容器padding-right为滚动条宽度,就能有效消除这个不良影响。...body { padding-right: calc(100vw - 100%); } 禁止长按操作 有时不想用户长按元素呼出菜单进行点链接、打电话、发邮件、保存图片或扫描二维码等操作,声明touch-callout...import Fastclick from "fastclick"; FastClick.attach(document.body) 禁止滑动穿透 移动端浏览器里出现弹窗,若在屏幕上滑动能触发弹窗底下内容跟着滚动...弹窗打开后内部内容无法滚动 弹窗关闭后页面滚动位置丢失 Webview能上下滑动露出底色 当打开弹窗给声明position:fixed;left:0;width:100%并动态声明top。...在输入框聚焦获取页面当前滚动条偏移量,在输入框失焦赋值页面之前获取滚动条偏移量,这样就能间接还原页面滚动条偏移量解决页面高度坍塌。

    3.4K10

    怎样才算是个出色移动网站

    让吸引注意力元素前置居中 通过菜单或“首屏线以下空间”(网页中不向下滚动便无法看到部分)提供二级任务。 ✔ 宜:将用户所有最常见任务安排在便于访问位置。...简化返回首页操作 用户期望在其点按移动页面左上角徽标能够返回首页,如果未提供该徽标或者徽标不起作用,会令他们感到失望。 ✔ 宜:简化返回首页操作。...引导用户获得更相关网站搜索结果 通过菜单或“首屏线以下空间”(网页中不向下滚动便无法看到部分)提供二级任务。 ✔ 宜:通过沿正确方向引导用户来帮助他们查找其要寻找内容。...研究参与者发现混合使用桌面和移动优化页面的网站甚至比单纯使用桌面页面的网站还要难以使用。 别让用户进行捏拉缩放 用户对垂直滚动网站感到顺手,水平滚动则不然。 避免使用大型、固定宽度元素。...利用 CSS 媒体查询为不同屏幕应用不同样式。 不要创建只能在特定视口宽度下正常显示内容。强制用户水平滚动网站无法通过 Google 移动易用性测试,可能对其搜索排名产生不良影响。

    2K50

    前端工程师面试题汇总

    (携程) overflow: scroll不能平滑滚动问题怎么处理? 有一个高度自适应div,里面有两个div,一个高度100px,希望另一个填满剩下高度。...需求:实现一个页面操作不会整页刷新网站,并且能在浏览器前进、后退正确响应。给出你技术实现方案? 如何判断当前脚本运行在浏览器还是node环境中?(阿里) 移动端最小触控区域是多大?...把 Script 标签 放在页面的最底部body封闭之前 和封闭之后有什么区别?浏览器会如何解析它们? 移动点击事件有延迟,时间是多久,为什么会有? 怎么解决这个延时?...B拿到箱子后,再在箱子上加一把自己。 箱子运回A后,A取下自己。箱子再运到B手中,B取下自己,获得药物。...Amazon主页左上角有一个商品分类浏览下拉菜单 没有延迟,而且子菜单也不会在不应该时候消失。它是怎样做到这一点呢?

    2K80

    VS Code(​终端)

    聚焦拆分终端窗格,可以使用以下命令之一移动焦点并调整大小: 键 命令 Alt +左 聚焦上一个窗格 Alt +右 聚焦下一个窗格 未分配 调整左窗格大小 未分配 调整右窗格大小 未分配 调整窗格大小...PageDown 向下滚动 Shift + PageUp 向上滚动页面 Shift + PageDown 向下滚动页面 Ctrl + Home 滚动到顶部 Ctrl +结束 滚动到底部 未分配 清除终端...macOS:选择光标下单词并显示上下文菜单。 Windows:如果有选择,则复制并拖放选择,否则粘贴。...强制键绑定通过终端 当焦点集中在集成终端中,由于击键被传递到终端本身并由终端自身使用,因此许多键绑定将不起作用。...发送来自绑定文本 该workbench.action.terminal.sendSequence命令可用于向终端发送特定文本序列,包括转义序列。这使诸如发送箭头键,输入,光标移动等操作成为可能。

    3.5K20

    谷歌 Flutter 1.17 发布

    更新文本选择在Android上溢出 iOS上更新文本选择溢出 当按钮长度比没有溢出可以显示时间长,文本选择菜单现在可以提高Android和iOS保真度。...这在菜单项单词可能更长语言环境中尤其明显。...请注意,TextStyles所谓body1和body2在材料设计规范被称为bodyText1和bodyText2颤振TextThemeAPI。...此选项将您应用程序捆绑到实际上未在您设备上安装通用Android“包装器”中,这与正常启动选项不同。此外,在某些情况下它不起作用,例如,当您使用访问后台执行插件。...#42100 使用pushReplacement(…,运行先前路线辅助动画 #45940弃用UpdateLiveRegionEvent #49389延迟快速滚动图像解码 #49391文本选择溢出

    3.5K10

    html网页详细代码「建议收藏」

    =0 窗口距离屏幕上方象素值;   left=0 窗口距离屏幕左侧象素值;   toolbar=no 是否显示工具栏,yes为显示;   menubar,scrollbars 表示菜单栏和滚动栏。...window.opener.location.reload() 26.如何设定打开页面的大小 打开页面的位置 27.在页面中如何加入不是满铺背景图片,拉动页面背景图不动...0 窗口距离屏幕上方象素值; left=0 窗口距离屏幕左侧象素值; toolbar=no 是否显示工具栏,yes为显示; menubar,scrollbars 表示菜单栏和滚动栏。...方法一: 浏览器读页面弹出窗口; 方法二: 浏览器离开页面弹出窗口; 方法三:用一个连接调用: 打开一个窗口 注意:使用“#”是虚连接。...方法一: 浏览器读页面弹出窗口; 方法二: 浏览器离开页面弹出窗口; 方法三:用一个连接调用: 打开一个窗口 注意:使用“#”是虚连接。

    7.4K41
    领券