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. 【Java SE进阶】Day12 函数式接口、函数式编程（Lambda表达式）

    一.函数式接口介绍 1.概念 仅有一个抽象方法的接口 适用于函数式编程(Lambda使用的接口) 语法糖:方便但原理不变,如for-each是Iterator的语法糖 Lambda≈匿名内部类的语法糖 ...

  2. 20W，PD快充协议芯片，带有PPS控制器的USB-PD3.0

    JD6621是高度集成的USB供电(PD)控制器,支持USB PD 3.0 ,该USB PD 3.0 具有针对USB Type-C下游接口(源)设计的可编程电源( PPS)规范. 它监视CC引脚以检测 ...

  3. jQuery使用 前端框架Bootstrap

    目录 jQuery查找标签 1.基本选择器 2.组合选择器 3.后代选择器 4.属性选择器 5.基本筛选器 7.筛选器方法 链式操作的本质 操作标签 1.class操作 2.位置操作 3.文本操作 4 ...

  4. 聊聊CPU的发展历程之单核、多核、超线程

    作者:小牛呼噜噜 | https://xiaoniuhululu.com 计算机内功.JAVA底层.面试.职业成长相关资料等更多精彩文章在公众号「小牛呼噜噜」 大家好,我是呼噜噜,在计算机的早期,In ...

  5. C++进阶（哈希）

    vector容器补充(下面会用到) 我们都知道vector容器不同于数组,能够进行动态扩容,其底层原理:所谓动态扩容,并不是在原空间之后接续新空间,因为无法保证原空间之后尚有可配置的空间.而是以原大小 ...

  6. VS2022,VS2019最新安裝方法

    直接参照:  https://www.bilibili.com/read/cv12364240/ 2022年5月30浩,亲测可用 1.下载notepad++ (必须) 2. 去微软官网下载 对应的安装 ...

  7. 新款 c++ web framework 支持orm http/2

    c++ web framework很少, 随着c++ 热度升温,c++ 在人工智能 自然语言处理 加快应用. 最近一款国产 c++ web framework 问世 写业务速度跟脚步语言一样速度 自带 ...

  8. python之路33 MySQL 1

    存取数据的演变 1.文本文件 文件路径不固定:C:\aaa.txt D:\bbb.txt E:\ccc.txt 数据格式不统一:jason|123 jason$123 jason 123 2.软件开发 ...

  9. Educational Codeforces Round 141 解题报告

    Educational Codeforces Round 141 解题报告 \(\text{By DaiRuiChen007}\) \(\text{Contest Link}\) A. Make it ...

  10. SQL中常用函数操作

    --在SQL SERVER中批量替换字符串的方法 update [Table] set [Field] = REPLACE([Field],'被替换的原内容','要替换的内容') update HBb ...