弹窗时候禁止页面滚动
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
弹窗时候禁止页面滚动相关推荐
- 蒙层禁止页面滚动的方案
蒙层禁止页面滚动的方案 弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是在蒙层出现的时候滚动页面,如果不加处理,蒙层底部的页面会开始滚动,实际上我 ...
- vue弹层时禁止页面滚动
创建组件时禁止页面滚动: created(){//禁止页面滑动document.body.addEventListener('touchmove', this.bodyScroll, { passiv ...
- html js控制页面蒙版,javascript实现蒙版与禁止页面滚动
本文实例为大家分享了javascript实现蒙版与禁止页面滚动的具体代码,供大家参考,具体内容如下 项目需求:页面很长,要求加个蒙版,点击特定位置蒙版消失可以滑动页面,否则蒙版存在页面不可以滑动:要同 ...
- 滚动旋钮时禁止页面滚动-jquery.knob.js
jquery.knob.js一款很棒的jquery旋钮插件 gayhub地址:https://github.com/aterrien/jQuery-Knob 当鼠标滚轮作用于旋钮时,禁止页面滚动 $( ...
- vue中禁止页面滚动/滚动事件穿透-弹出蒙版时弹出层下面还可以滚动问题解决
弹出层时,蒙版下还可以滚动页面 移动端 在蒙层所在div上加 @touchmove.prevent <div class="maskBox" @touchmove.preve ...
- 移动端弹出遮罩层禁止页面滚动,遮罩里面的框允许滚动如何实现。
因为有的弹窗上面有滑动,但是滑动部分滑动时会带动底下的页面滚动,如何解决? 1.弹窗弹起时 activityAgreement:function(){vm.agreementsDailog=true; ...
- vue中禁止页面滚动/滚动事件穿透
1.移动端 在蒙层所在div上加 @touchmove.prevent <div class="maskBox" @touchmove.prevent></div ...
- js实现弹出框时禁止页面滚动,关闭弹出框时恢复页面滚动
$(function () {$('#pingtai').click(function () {if($('#serviceDes').css('display','none')){$('#servi ...
- 如何禁止页面滚动事件
document.documentElement.style.overflow='hidden';//即:设置html元素的overflow属性hidden document.body.style.o ...
最新文章
- Linux 文件系统引起的云盘文件系统异常导致 MySQL 数据页损坏事故恢复复盘
- vba 压缩图片_1分钟批量处理100张图片,Word图片批量压缩/提取/居中统统搞定
- c语言for要分号错误,c语言for语句
- linux系统不知道电脑密码怎么办,Linux如何修复系统的Root密码 -电脑资料
- day69 Django--Form组件
- 以太坊源码分析:共识(1)矿工
- 高校图书馆管理系统 php 漏洞,江苏汇文Libsys图书馆管理系统几处通用SQL注入漏洞...
- Matlab实现Sandbox方法计算分形维数
- cocos2d-x打飞机实例总结
- protobuf生成Go代码插件gogo/protobuf
- 若依框架使用自带的方法进行图片上传
- VMWare:vSphere6 企业版参考序列号
- 如何获取屏幕DPI/PPI并计算A4纸在屏幕的大小
- FPGA学习笔记_UART串口协议_串口接收端设计
- gitlab批量下载projects
- Blackberry运营商Vendor ID代码表
- 数学乐 --- 直线的方程(个人学习笔记)
- 企业数字化的4个痛点,低代码平台这样解决
- python2环境安装_2.Python环境安装
- 2016年WINLIN研发和团队计划
热门文章
- java表数据去重_java8实现列表去重,java8的stream 和lambda的使用实例
- iframe 覆盖父页面_一次iframe子页面与父页面的通信
- python大数据后期教学_大数据处理之道(十分钟学会Python)
- python和c有什么区别_c 跟 python的区别有哪些
- php获取本月工作日,ThinkPHP中获取指定日期后工作日的具体日期方法
- python安装mysqlclient模块报fatal error: Python.h:解决方法
- 20179214《网络攻防实践》第二周学习总结
- Android核心程序之SystemUI - (一)开篇
- 1.4激活函数-带隐层的神经网络tf实战
- writing-mode属性