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. 【Shell案例】【wc、awk、cat、管道】1、统计文件的行数

    描述写一个 bash脚本以输出一个文本文件 nowcoder.txt中的行数示例:假设 nowcoder.txt 内容如下: #include <iostream> using names ...

  2. 【每日一题】【哈希表，返回结果的下标】2022年1月18日-NC61 两数之和

    描述给出一个整型数组 numbers 和一个目标值 target,请在数组中找出两个加起来等于目标值的数的下标,返回的下标按升序排列.(注:返回的数组下标从1开始算起) 算法: import java ...

  3. 全网最全的linux上docker安装oracle的详细文档，遇到了n个问题，查了几十篇文章，最终汇总版，再有解决不了的,私聊我，我帮你解决

    目录 全网最全的linux上docker安装oracle的详细文档,遇到了n个问题,查了几十篇文章,最终汇总版,再有解决不了的,私聊我,我帮你解决 1. 拉取阿里镜像oracle 2. 创建初始化数据 ...

  4. Java/JDK各版本主要特性汇总

    目录 Java18(2022.3) Java17(2021.9)(LTS版本) Java16(2021.3) Java15(2020.9) Java14(2020.3) Java13(2019.9) ...

  5. PowerDotNet平台化软件架构设计与实现系列（14）：平台建设指南

    软件开发中常见的几种不同服务模型包括SaaS(软件即服务).LaaS(许可即服务).PaaS(平台即服务).CaaS(容器即服务).IaaS(基础设施即服务)和FaaS(功能即服务). 很多人认为Ia ...

  6. JS 过滤数组中 对象的某个属性

    var newArray = [{name: "aaa",value: 0, height: 1},{name: "bbb",value: 1, height: ...

  7. 【Redis场景2】缓存更新策略(双写一致)

    在业务初始阶段,流量很少的情况下,通过直接操作数据是可行的操作,但是随着业务量的增长,用户的访问量也随之增加,在该阶段自然需要使用一些手段(缓存)来减轻数据库的压力:所谓遇事不决,那就加一层. 在当前 ...

  8. 万字长文详解 YOLOv1-v5 系列模型

    一,YOLOv1 Abstract 1. Introduction 2. Unified Detectron 2.1. Network Design 2.2 Training 2.4. Inferen ...

  9. [深度学习] Pytorch模型转换为onnx模型笔记

    本文主要介绍将pytorch模型准确导出为可用的onnx模型.以方便OpenCV Dnn,NCNN,MNN,TensorRT等框架调用.所有代码见:Python-Study-Notes 文章目录 1 ...

  10. ES中的内置对象--jquery如何优化代码，少用$进行查找，减少查找次数的方法