博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
禁止页面滚动效果
阅读量:4634 次
发布时间:2019-06-09

本文共 768 字,大约阅读时间需要 2 分钟。

应用场景:页面出现浮层时禁止页面滚动(移动端滑动)

1. pc端实现

$('body').css('overflow','hidden');//浮层出现时窗口不能滚动设置$('body').css('overflow','auto');// 浮层关闭时滚动设置

2.移动端实现

var preHandler=function(e){e.preventDefault();},// 注意此处代码片段必须这样提出来已保证传入下边两个事件的处理程序一样才生效,分别写到事件处理程序中不生效。document.addEventListener('touchmove', me.preHandler,false);//阻止默认滑动事件document.removeEventListener('touchmove', me.preHandler, false);//浮层关闭时解除事件处理程序

3.浮层实现效果

.mask{    position: fixed;    top:0;    left:0;    width: 100%;    height: 100%;    background-color: rgba(0,0,0,0.7);    z-index: 99;}.box-introduce-content{ // 浮层中内容上下左右居中实现    position: absolute;    margin: auto;    top: 0;    bottom: 0;    left: 0;    right: 0;    padding: 0 0.15rem;    height: 4.23rem;}

 

转载于:https://www.cnblogs.com/weilantiankong/p/6599655.html

你可能感兴趣的文章
Linux学习笔记11——文件I/O之二
查看>>
PHP 如何判断当前用户已在别处登录
查看>>
Join
查看>>
Java 5种字符串拼接方式(性能比较)
查看>>
PWE
查看>>
PHP多线程的实现(PHP多线程类)
查看>>
人生不只是上坡路
查看>>
vim的安装和配置
查看>>
k8s实战之从私有仓库拉取镜像 - kubernetes
查看>>
centos7硬盘分区
查看>>
chrome扩展之3:一步步跟我学开发一个表单填写扩展
查看>>
Socket、Http、TCP/IP、UDP的联系与区别
查看>>
包装函数
查看>>
原理系列:Spark1.x 生态圈一览
查看>>
django模板系统(下)
查看>>
HDU 1711 Number Sequence(KMP模板)
查看>>
如何查看Ubuntu版本
查看>>
本杰明 富兰克林 道德13准则
查看>>
JAVA 操作系统已经来到第五个版本了 现陆续放出三个版本 这是第二个版本
查看>>
LightOJ 1370 Bi-shoe and Phi-shoe(欧拉函数)
查看>>