toggleBody(isPin){

    if(isPin){

        document.body.style.height = '100vh'

        document.body.style['overflow-y'] = 'hidden'

    }else{

        document.body.style.height = 'unset'

        document.body.style['overflow-y'] = 'auto'

    }

}

toggleBody(1)  //在跳出弹窗的时候

toggleBody(0)  //弹窗消失的时候

vue弹窗后如何禁止滚动条滚动的更多相关文章

  1. vue弹窗后如何禁止滚动条滚动？

    原文地址 常见场景 在许多填写表单的页面中,都会弹出一个选择器,让你在弹窗中选择项目.有时,弹窗本身容纳不下内容,需要让它不断滚动来展示,但因为事件是冒泡的,有时就会造成底部(body 的Z-inde ...

  2. jquery 禁止滚动条滚动，并且滚动条不消失，页面大小不闪动

    一,禁止滚动,滚动条不消失,页面大小不闪动 //禁止滚动条滚动 function unScroll() { var top = $(document).scrollTop(); $(document) ...

  3. js禁止滚动条滚动，并且滚动条不消失，页面大小不变

    //禁止滚动条滚动 function unScroll() { var top = $(document).scrollTop(); $(document).on('scroll.unable',fu ...

  4. vue 弹窗禁止底层滚动

    原因:底层视图高度超出百分百,加入弹窗后再苹果浏览器隐藏上下栏的情况下遮罩层没有完全遮住底层. 处理:打开弹窗后禁止底层滚动调用stop事件,关闭则开启底层滚动调用move事件. let mo=fun ...

  5. jquery弹窗时禁止body滚动条滚动

    当弹出一个jq提示窗口的时候,一般窗口右边还会有进度条的情况,禁止进度条方法禁止浏览器滚动条滚动: $('body').css({ "overflow-x":"hidde ...

  6. 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后，子元素不随着滚动条滚动的问题

    解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题   在IE6,IE7下,子元素使用position:relati ...

  7. 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究

    PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...

  8. 移动端vue页面禁止移动/滚动

    当需要在移动端中禁止页面滚动,加入:@touchmove.prevent即可,例子如下 <template> <div @touchmove.prevent> <h3 c ...

  9. js禁止页面滚动

    开发移动端页面的时候有一个很比较常见的需求,在出现弹窗时,禁止滑动弹窗后面的主体页面.如何实现呢,往下看 js实现整个页面禁止滚动: document.body.addEventListener('t ...

  10. 禁止body滚动允许div滚动防微信露底

    最近遇到一个需求,页面中只有一个div允许滚动,其他内容不允许滚动. 正常来讲加上 body{height:100%;overflow: hidden;} 应该就阻止页面滚动了.可是很悲催的是手机端并 ...

随机推荐

  1. 【笔面试真题】Flow++赋乐科技-面试-2022年1月25日

    一.概括 涉及JVM的GC.三色标记 并发部分的锁 Java集合中的hashmap.list kafka中ISR相关 硬件相关-有无DMA 自定义类(代码) 缺陷:锁.list 二.JVM相关内容 1 ...

  2. 铁威马NAS如何开启二次验证提高系统安全性

    想到登录TNAS时更安全?直接开启OTP二次验证,通过 TNAS mobile生成的一次性密码登录NAS存储,简单设置,提升TOS系统访问安全性给你TNAS双重保护. 1.首先,确认你的TOS系统在5 ...

  3. 粘包、struct模块、进程并行与并发

    目录 粘包现象 struct模块 粘包代码实战 udp协议(了解) 并发编程理论 多道技术 进程理论 进程并行与并发 进程的三状态 粘包现象 1.服务端连续执行三次recv 2.客户端连续执行三次se ...

  4. [图像处理] YUV图像处理入门2

    1 分离YUV420中YUV分量 本程序中的函数主要是将YUV420P视频数据流的第一帧图像中的Y.U.V三个分量分离开并保存成三个文件.函数的代码如下所示: /** * @file 1 yuv_sp ...

  5. 10分钟做好 Bootstrap Blazor 的表格组件导出 Excel/Word/Html/Pdf

    上篇: Bootstrap Blazor 实战 通用导入导出服务(Table组件) 1.新建工程 新建工程b14table dotnet new blazorserver -o b14table 将项 ...

  6. [Leetcode]设计循环队列

    题目   代码 class MyCircularQueue { public: /** Initialize your data structure here. Set the size of the ...

  7. 【Java刷题】初始化List应该选择ArrayList还是LinkedList

    文章目录 前言 题目 解题思路 遇到的坑:ArrayList和LinkedList 未通过代码 通过代码 小结 ArrayList和LinkedList的区别 在刷题的时候应该如何选择 排序效率 测试 ...

  8. 数学 in OI-数论-1

    数论 \(1\) \(1.\) 质数 定义就不说了吧. 性质 \(\&\) 定理 质数 \(p\) 有且仅有两个质因子 \(1\) 和 \(p\) . 质数有无穷个. \([1,\, n]\) ...

  9. 【FAQ】申请运动健康服务验证环节常见问题及解答

    华为 HMS Core 运动健康服务(HUAWEI Health Kit)提供原子化数据开放.应用在获取用户数据授权后,可通过接口访问运动健康数据,对用户数据进行读写等操作,为用户提供运动健康类数据服 ...

  10. Spring异步Async和事务Transactional注解

    Spring开发中我们我们常常用到@Transaction和@Async,但这2个注解加在一起很多的开发者不敢用,担心事务不生效.下面我们就仔细讲解一下这2个注解同时运用,文章用3个场景讲述它们之间的 ...