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. 连表操作join 子查询 SQL补充 数据库软件navicat pymysql模块

    目录 多表查询的两种方法 方式1:连表操作 方式2:子查询 SQL补充知识点 1.分组之前字段拼接 concat concat_ws 2.SQL执行判断条件 exists 3.表相关SQL补充 修改表 ...

  2. 01.Typora基本使用

    1.标题 方法一: 在文字前面加上"#",将其变成标题. "#"的数量决定字体的大小."#"数量越多字体越小. 如下,其中一级标题是字体最大 ...

  3. day04-功能实现03

    家居网购项目实现03 8.功能07-后台管理 显示家居 8.1需求分析/图解 给后台管理提供独立登录页面,管理员登录地址不对外公开 管理员登录成功后,显示管理菜单页面 管理员点击家居管理,显示所有家居 ...

  4. 一文聊透Apache Hudi的索引设计与应用

    Hudi索引在数据读和写的过程中都有应用.读的过程主要是查询引擎利用MetaDataTable使用索引进行Data Skipping以提高查找速度;写的过程主要应用在upsert写上,即利用索引查找该 ...

  5. QT中常用控键

    1.TableWidget类 1.1. 表格属性设置 1.1.1设置行列属性 //设置行列均分 tableWidget->horizontalHeader()->setStretchLas ...

  6. 含辞未吐,声若幽兰,史上最强免费人工智能AI语音合成TTS服务微软Azure(Python3.10接入)

    所谓文无第一,武无第二,云原生人工智能技术目前呈现三足鼎立的态势,微软,谷歌以及亚马逊三大巨头各擅胜场,不分伯仲,但目前微软Azure平台不仅仅只是一个PaaS平台,相比AWS,以及GAE,它应该是目 ...

  7. GitHub车牌检测识别项目调研

    一,EasyOCR 1.1,仓库介绍 1.2,使用记录 二,HyperLPR 2.1,HyperLPR 概述 2.3,使用记录 2.3,使用建议 三,simple-car-plate-recognit ...

  8. 详解kubernetes五种暴露服务的方式

    部署完服务终将是为了访问,那么kubernetes中service和ingress都可以将集群内部的服务能够支持外部访问.service可以让一组 Pod(称为"后端")为集群内的 ...

  9. 建立一个简单干净的 gn+ninja 工具链

    背景 事情的起因是,想找个跨 Windows 和 Mac 的构建方案.第一考虑自然是 CMake,毕竟基本上是事实标准了. 但是研究了一下 Modern CMake,也就是以 target 为核心的理 ...

  10. 分布式拒绝服务攻击(DDoS)和僵尸网络(Botnet)

    DDos和僵尸网络是相辅相成的两种攻击手段,本文仅介绍基本概念,详细请查看文末参考资料. 分布式拒绝服务攻击(DDoS) 分布式拒绝服务攻击DDoS是一种基于DoS的特殊形式的拒绝服务攻击,是一种分布 ...