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. JavaScript入门⑦-DOM操作大全

    JavaScript入门系列目录 JavaScript入门①-基础知识筑基 JavaScript入门②-函数(1)基础{浅出} JavaScript入门③-函数(2)原理{深入}执行上下文 JavaS ...

  2. pycharm 2021.2.1专业版破解

    1.网址:https://gitee.com/pengzhile/ide-eval-resetter 2.点击下载.下载后直接丢进pycharm中. 3.勾选.重启 .查看

  3. Kafka技术专题之「性能调优篇」消息队列服务端出现内存溢出OOM以及相关性能调优实战分析

    内存问题 本篇文章介绍Kafka处理大文件出现内存溢出 java.lang.OutOfMemoryError: Direct buffer memory,主要内容包括基础应用.实用技巧.原理机制等方面 ...

  4. 如何用 JavaScript 编写你的第一个单元测试

    前言 测试代码是使代码安全的第一步.做到这一点的最好方法之一是使用单元测试,确保应用程序中的每个小功能都能发挥其应有的作用--特别是当应用程序处于边缘情况,比如无效的输入,或有潜在危害的输入. 为什么 ...

  5. STM32标准库中GPIO_ReadInputData与GPIO_ReadInputDataBit的区别

    GPIO_ReadInputData读的是GPIOx的整个IDR寄存器的数据,返回一个十六位数,对应IDR寄存器的十六位.反映GPIOx所有端口的电平状态,所以参数只用传入GPIOx. uint16_ ...

  6. 如何自定义调整bootstrap的模态框大小

    背景 项目遇到一个需求,一个大表格放到模态框中,总是会出现撑开的效果,换了文档最大的modal-lg样式还不能解决,原因就是官方不支持更大号的模态框,需要自定义. 经过尝试理解,总结出调整模态框大小通 ...

  7. [机器学习] Yellowbrick使用笔记2-模型选择

    在本教程中,我们将查看各种Scikit Learn模型的分数,并使用Yellowbrick的可视化诊断工具对它们进行比较,以便为我们的数据选择最佳的模型. 代码下载 文章目录 1 使用说明 1.1 模 ...

  8. python进阶之路7 数据类型的内置方法

    内容回顾 while 循环补充说明 1.死循环 2.while循环嵌套和全局标志位 for循环 1.for 变量名 in 待遍历数据 for循环体代码 2.for 也可以与break continue ...

  9. SSM框架——整合ssm

    SSM整合 1.准备工作 新建一个普通的Maven项目 建好所有需要的架构层 向pom.xml中导入所有的依赖 <!--MyBatis相关--> <dependency> &l ...

  10. 聊聊web漏洞挖掘第一期

    之前写2022年度总结的时候,有提到要给大家分享漏洞挖掘技巧.这里简单分享一些思路,更多的内容需要大家举一反三. 文章准备昨晚写的,昨天晚上出去唱歌,回来太晚了,耽搁了.昨天是我工作的last day ...