2019独角兽企业重金招聘Python工程师标准>>>

1、依靠css 将页面
document.documentElement.style.overflow='hidden';
 
document.body.style.overflow='hidden';//手机版设置这个。
如果设置了如上,页面的滚动条将会消失,此时鼠标滚轮失效。

// 禁止键盘滚动页面

var move=function(e){
e.preventDefault && e.preventDefault();
e.returnValue=false;
e.stopPropagation && e.stopPropagation();
return false;
    }
    var keyFunc=function(e){
if(37<=e.keyCode && e.keyCode<=40){
return move(e);
}
}
    document.body.οnkeydοwn=keyFunc;

// 一直显示滚动条

var st;
    var scroll=function(e){
clearTimeout(st);
st=setTimeout(function(){
window.scrollTo(loc.scrollLeft,loc.scrollTop);
},5);
    }
    window.οnscrοll=scroll;

2、建立一个函数
function bodyScroll(event){  
    event.preventDefault();  
}

之后在触发弹窗的时候禁止页面滚动
document.body.addEventListener('touchmove',bodyScroll,false);  
$('body').css({'position':'fixed',"width":"100%"});

关闭弹框时开启页面滚动
document.body.removeEventListener('touchmove',bodyScroll,false);   
$("body").css({"position":"initial","height":"auto"});

注意:切不可以下写法
document.body.addEventListener('touchmove', function (event) {  
    event.preventDefault();  
},false);  
document.body.removeEventListener('touchmove', function (event) {  
    event.preventDefault();  
},false);

因为添加和移除的函数对象应该是同一个,要不然移除不起作用,即listener,所以不能直接用匿名函数function(e){e.preventDefault();}

转载于:https://my.oschina.net/jack088/blog/3003051

弹窗时候禁止页面滚动相关推荐

  1. 蒙层禁止页面滚动的方案

    蒙层禁止页面滚动的方案 弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是在蒙层出现的时候滚动页面,如果不加处理,蒙层底部的页面会开始滚动,实际上我 ...

  2. vue弹层时禁止页面滚动

    创建组件时禁止页面滚动: created(){//禁止页面滑动document.body.addEventListener('touchmove', this.bodyScroll, { passiv ...

  3. html js控制页面蒙版,javascript实现蒙版与禁止页面滚动

    本文实例为大家分享了javascript实现蒙版与禁止页面滚动的具体代码,供大家参考,具体内容如下 项目需求:页面很长,要求加个蒙版,点击特定位置蒙版消失可以滑动页面,否则蒙版存在页面不可以滑动:要同 ...

  4. 滚动旋钮时禁止页面滚动-jquery.knob.js

    jquery.knob.js一款很棒的jquery旋钮插件 gayhub地址:https://github.com/aterrien/jQuery-Knob 当鼠标滚轮作用于旋钮时,禁止页面滚动 $( ...

  5. vue中禁止页面滚动/滚动事件穿透-弹出蒙版时弹出层下面还可以滚动问题解决

    弹出层时,蒙版下还可以滚动页面 移动端 在蒙层所在div上加 @touchmove.prevent <div class="maskBox" @touchmove.preve ...

  6. 移动端弹出遮罩层禁止页面滚动,遮罩里面的框允许滚动如何实现。

    因为有的弹窗上面有滑动,但是滑动部分滑动时会带动底下的页面滚动,如何解决? 1.弹窗弹起时 activityAgreement:function(){vm.agreementsDailog=true; ...

  7. vue中禁止页面滚动/滚动事件穿透

    1.移动端 在蒙层所在div上加 @touchmove.prevent <div class="maskBox" @touchmove.prevent></div ...

  8. js实现弹出框时禁止页面滚动,关闭弹出框时恢复页面滚动

    $(function () {$('#pingtai').click(function () {if($('#serviceDes').css('display','none')){$('#servi ...

  9. 如何禁止页面滚动事件

    document.documentElement.style.overflow='hidden';//即:设置html元素的overflow属性hidden document.body.style.o ...

最新文章

  1. Linux 文件系统引起的云盘文件系统异常导致 MySQL 数据页损坏事故恢复复盘
  2. vba 压缩图片_1分钟批量处理100张图片,Word图片批量压缩/提取/居中统统搞定
  3. c语言for要分号错误,c语言for语句
  4. linux系统不知道电脑密码怎么办,Linux如何修复系统的Root密码 -电脑资料
  5. day69 Django--Form组件
  6. 以太坊源码分析:共识(1)矿工
  7. 高校图书馆管理系统 php 漏洞,江苏汇文Libsys图书馆管理系统几处通用SQL注入漏洞...
  8. Matlab实现Sandbox方法计算分形维数
  9. cocos2d-x打飞机实例总结
  10. protobuf生成Go代码插件gogo/protobuf
  11. 若依框架使用自带的方法进行图片上传
  12. VMWare:vSphere6 企业版参考序列号
  13. 如何获取屏幕DPI/PPI并计算A4纸在屏幕的大小
  14. FPGA学习笔记_UART串口协议_串口接收端设计
  15. gitlab批量下载projects
  16. Blackberry运营商Vendor ID代码表
  17. 数学乐 --- 直线的方程(个人学习笔记)
  18. 企业数字化的4个痛点,低代码平台这样解决
  19. python2环境安装_2.Python环境安装
  20. 2016年WINLIN研发和团队计划

热门文章

  1. java表数据去重_java8实现列表去重,java8的stream 和lambda的使用实例
  2. iframe 覆盖父页面_一次iframe子页面与父页面的通信
  3. python大数据后期教学_大数据处理之道(十分钟学会Python)
  4. python和c有什么区别_c 跟 python的区别有哪些
  5. php获取本月工作日,ThinkPHP中获取指定日期后工作日的具体日期方法
  6. python安装mysqlclient模块报fatal error: Python.h:解决方法
  7. 20179214《网络攻防实践》第二周学习总结
  8. Android核心程序之SystemUI - (一)开篇
  9. 1.4激活函数-带隐层的神经网络tf实战
  10. writing-mode属性