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. LeetCode HOT 100：最大子数组和

    题目:53. 最大子数组和 题目描述: 给你一个整数数组,在该数组的所有子数组中,找到一个子数组中所有元素相加和最大,返回这个最大的和.子数组就是一个数组中,由一个或几个下标连续的元素,组成的小数组, ...

  2. java逻辑运算&&与&的区别

    本文主要阐述&&(短路与)和&(逻辑与)的运算异同:a && b 和 a&b : 共同之处是只有a和b同时为真时,结果才为真,否则为假 不同点在于 a ...

  3. vue实现移动端左右菜单双向联动效果

    话不多说,上demo <template> <div id="app"> <header>左右列表双向联动</header> < ...

  4. 判断条件为NULL

    在ASCII码表里NULL的二进制位0.所以NULL作为判断条件时,表示为假的意思. ASCII表               二进制                       字符         ...

  5. CH334、CH335USB2.0Hub芯片（更新ing）

    USB HUB又称USB集线器,主要用于USB主机端口扩展,广泛应用于计算机,笔记本,及周边应用.CH334.CH335是符合 USB2.0 协议规范的高性能MTT 4 端口 USB2.0  HUB  ...

  6. Redis 中ZSET数据类型命令使用及对应场景总结

    转载请注明出处: 目录 1.zadd添加元素 2.zrem 从有序集合key中删除元素 3.zscore 返回有序集合key中元素member的分值 4.zincrby 为有序集合key中元素增加分值 ...

  7. Java基础篇——注解和反射

    注解 注解Annotation可以被其他程序(编译器)读取,常见的有@override 内置注解 @Override 适用于修饰方法,表明重写父类中的一个方法 @Deprecated 用于修饰类.方法 ...

  8. [Leetcode] 寻找数组的中心索引

    题目 代码 class Solution { public: int pivotIndex(vector<int>& nums) { int right=0; for(auto i ...

  9. 算法学习笔记(8.1): 网络最大流算法 EK, Dinic, ISAP

    网络最大流 目录 网络最大流 EK 增广路算法 Dinic ISAP 作者有话说 前置知识以及更多芝士参考下述链接 网络流合集链接:网络流 最大流,值得是在不超过管道(边)容量的情况下从源点到汇点最多 ...

  10. 【学习笔记】Splay

    \(\texttt{0x01}\) 前言 Splay 树(伸展树)是一棵二叉搜索树,由 Daniel Sleator 和 Robert Tarjan 于 1985 年发明.它凭借旋转可以有 $O(\l ...