页面无法滚动_【前端词典】滚动穿透问题的解决方案

点击上方“前端真好玩”,喜欢他就关注他

听说,看恺哥的文章会上瘾

背景

产品有三宝,弹窗,浮层加引导;
设计有三宝,透明,阴影加圆角;
运营有三宝,短信,推送加红包;
程序员有一宝,这个做不了。

随着移动端市场的份额越大,需求就越多样化。我们今天讨论的是移动端的滚动穿透问题。上面这段调侃的话可以看出需求中弹窗浮层还是挺常见的,那这个和滚动穿透有什么联系呢?

我先解释下什么是滚动穿透

页面滑出了一个弹窗,我们用手指触摸屏幕滑动时,会发现弹窗下面的内容还是在滚动。这个现象就是滚动穿透

接下就说下我对滚动穿透问题解决方案探索的过程,希望对大家有点启发。

需求

需求: 希望在点击图片的时候,从下方弹一个全屏的弹框来描述这张图片的详情。

方案

接到这个需求觉得没有难度,很快就提测了,然后就开始逛逛掘金。可刚看大佬们的文章看的开心的时候,测试就在微信我。心想来 bug 了?19a16227832900a78327ea5ed1e747d8.png突然意识到写弹窗的时候忘记处理滚动穿透的问题了。记得第一次遇到这个问题的时候也是找了很久的资料。

方案一:

找到的第一个方法就是当弹窗触发的时候,给 overflow:scroll: 的元素加上一个 class (一般都是 body元素)。退出的时候去掉这个 class。下面为了方便,会直接用 body 元素来代指弹窗下方的元素。

// css 部分

modal_open {

position: fixed;

height: 100%;

}

// js 部分

document.body.classList.add('modal_open');

document.body.classList.remove('modal_open');

上面的这个方法可以解决滚动穿透问题,却也会带来新的问题。
即:

body 的滚动位置会丢失,也就是 bodyscrollTop 属性值会变为 0。

这个新问题比起滚动穿透本身来说更加麻烦,所以这个方案是要进行优化的。

方案二:

既然添加 modal_open 这个 class 会使 body 的滚动位置会丢失,那么我们为什么不在滚动位置丢失之前先保存下来,等到退出弹窗的前在將这个保存下来的滚动位置在设置回去。然后就朝着这个方向开始 coding 。

// css 部分

.modal_open {

position: fixed;

height: 100%;

}

// js 部分

/**

* ModalHelper helpers resolve the modal scrolling issue on mobile devices

* https://github.com/twbs/bootstrap/issues/15852

*/

var ModalHelper = (function(bodyClass) {

var scrollTop;

return {

afterOpen: function() {

scrollTop = document.scrollingElement.scrollTop ||

document.documentElement.scrollTop ||

document.body.scrollTop;

document.body.classList.add(bodyClass);

document.body.style.top = -scrollTop + 'px';

},

beforeClose: function() {

document.body.classList.remove(bodyClass);

document.scrollingElement.scrollTop = document.documentElement.scrollTop = document.body.scrollTop = scrollTop;

}

};

})('modal_open');

// method

modalSwitch: function(){

let self = this;

if( self.switchFlag === 'close' ){

ModalHelper.afterOpen();

self.switchFlag = 'open';

}else{

ModalHelper.beforeClose();

self.switchFlag = 'close';

}

}

方案二可以达到以下效果:

  1. 弹窗滚动的时候,下方的 body 是固定的无法滚动;

  2. body 的滚动位置不会丢失;

  3. body 有 scroll 事件;

方案二可以适应绝大多数的弹窗需求,提测后测试方也没有在提其他问题,这个问题算是完美的解决了。不过我在这个过程有一个疑问:

IOS 自有的橡皮筋效果会导致页面会出现短暂卡顿现象,暂时没有找到原因,请教各位。

其他方案:

使用 preventDefault 阻止浏览器默认事件:

var modal = document.getElementById('modalBox');

modal.addEventListener('touchmove', function(e) {

e.preventDefault();

}, false);

这个方案只适用于这个弹窗本身的高度小于屏幕的高度,即不可滚动的时候。 touchmovetouchstart更加合适。因为 touchstart 会连点击事件都阻止。

使用插件:

对于插件我的态度是,除非是自己实现起来太复杂,否则还是自己花点时间去实现。原因有二:

  1. 使用插件就意味着需要引入的文件至少多了一个。

  2. 插件过多,担心日后项目升级维护成本加大。

以上。

参考

  1. https://developer.mozilla.org/en-US/docs/Web/API/document/scrollingElement

  2. https://uedsky.com/2016-06/mobile-modal-scroll/

前端词典系列

《前端词典》这个系列会持续更新,每一期我都会讲一个出现频率较高的知识点。希望大家在阅读的过程当中可以斧正文中出现不严谨或是错误的地方,本人将不胜感激;若通过本系列而有所得,本人亦将不胜欣喜。

内容: 前端以及网络相关知识点的介绍并加以实际应用作为辅助。

目的: 这个系列的文章可以对读者起到一点帮助,解开一些迷惑。

希望各位多指点一二,不吝赐教。

如果你觉得我的文章写的还不错,那就关注我呗!


"原创写作,实属不易,感谢支持"

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/246460.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python安装无法打开_无法在打开时安装/运行docker

我在Dockerfile中使用了下面的代码,它成功地构建了,但是它没有运行。我怎样才能让它工作?在FROM python:3.5-slimCOPY . /appWORKDIR /appRUN apt-get updateRUN apt-get -y upgradeRUN pip install -r requirements.txtENTRYPOINT ["py…

前端将二进制数据流转为文件_前端通过二进制流下载文件

JS下载文件两种方式总结:下载文件主要分为两种形式,具体使用哪种方式取决于后台;1.如果后台服务器的静态目录有可供下载的静态资源,后台接口返回文件路径,直接window.location.hrefurl或者window.open(url)或者创建a标…

python采用哪种编码方式_Python编码格式的指定方式

参考自: http://python.jobbole.com/85852/, 原文探究的更深,有兴趣的可以去看看。简介来讲就是使用一种特殊的注释来声明编码格式,如何判断这种格式也用了很简单粗暴有效的办法--正则表达式;正则表达式如下&#xff1…

虚拟机连接网络_Parallels Desktop 16教程PD16虚拟机共享网络和桥接网络设置方法

许多用户在Mac上安装Parallels Desktop 16之后,想要设置Mac与虚拟机共享网络,那么共享网络和桥接网络设置有什么不同?该怎样设置?本篇就为大家分享PD16虚拟机共享网络和桥接网络设置方法。Parallels Desktop 16 for mac(pd虚拟机)…

如何批量转化成jpg格式_heic图片格式快速转换jpg,批量转换方法

heic图片是苹果手机独有的图片格式,电脑上或者其他设备是无法打开,需要将heic图片进行转换成jpg/bmp/png等电脑或其他设备可以的打开的格式,那今天就学习一下heic文件怎么转换的,将苹果的手机中的照片存到电脑上的某个文件夹&…

antd table 时间搜索_antd table按表格里的日期去排序操作

表格内容根据票据日期升序(这里是已经排序后的效果)上代码代码中data的内容如下根据paper_date排序,因为目前这种格式不支持比较,需要先转换成时间戳new Date(aTimeString).getTime()之后再用装换后的时间戳去比较,比较用到的函数是 .sort&am…

rf扫描枪_RF枪是什么,怎么用,在哪用?

RF枪,又称RF手持扫描枪、RF手持终端,是指利用无线射频技术(Radio Frequency Identification, RFID)完成数据采集、传输等功能,便于携带的数据采集终端,其特点就是坚固、耐用,可用在很多环境比较恶劣的地方。RF枪主要应…

macos ntfs插件_Mac下NTFS读写插件NTFS for Mac介绍

NTFS for Mac安装在Mac中如同一款插件一般支持Mac操作系统对NTFS文件系统正常读写。对于现在的Mac操作系统来说,经常会存在各种兼容方面的问题,所以我们在使用Mac的过程中遇到一些产品或操作无法完成需要通过其它方式来实现。NTFS for Mac就是这种情况下…

python中dump函数_python中实现php的var_dump函数功能

最近在做python的web开发(原谅我的多变,好东西总想都学着。。。node.js也是),不过过程中总遇到些问题,不管是web.py还是django,开发起来确实没用php方便,毕竟存在的时间比较短,很多不完善的地方。比如我在调…

查询去重_【Freya的MySQL课堂】DQL基础查询

MYSQL基础查询各位小伙伴们晚上好,今天是10月22号。我是你们的Freya。今天我们开始学习MySQL中的DQL语言。Do Not Stop Learning我的小课堂我爱学习,学习使我快乐今天你学习了吗?一、语法select 查询列表from 表名;二、特点1、查询列表可以是…

二阶偏微分方程组 龙格库塔法_有限单元法(Finite Element Method)实现声波方程模拟(Part 2)...

2.1 前言承接上一篇文章,前面我们已经介绍了一维声波方程有限元求解:蓝不是蓝:有限单元法(Finite Element Method)实现声波方程模拟(Part 1)​zhuanlan.zhihu.com这一部分将一维问题提升到二维问题。不知道大家有没有发…

mysql时间排序_mysql – 按日期和时间降序排序?

所有我想显示最近5个输入的数据,以获取特定的ID。我的sql查询是,SELECT id, name, form_id, DATE(updated_at) as dateFROM wp_frm_itemsWHERE user_id 11 && form_id9ORDER BY updated_at DESCupdated_at是DATETIME它按日期显示最后5个条目&am…

python图片转文字_【收藏】图片转成文字的方法总结,python批量图片转文字信息参考源码...

在日常办公或者学习中,往往存在这样一个工作场景,比如,“老王,我这里有一张图片,你把里面的文字信息给我整理出来”,都2021年了,你真的还在手敲图片文字信息么?那么还不赶紧收藏这篇…

mysql 写磁盘_图解MySQL | [原理解析] MySQL insert 语句的磁盘写入之旅

作者及简介:黄 炎,爱可生首席技术官;王 悦,爱可生研发团队成员,负责数据库管理平台相关项目的开发和故障排查,好奇 MySQL 技术原理及各类数据库实现方案。本文来源:转载自公众号-图解 MySQL*爱可…

监控mysql主从复制监控_shell脚本监控mysql主从同步状态

mysql做了主从同步之后,偶尔出现过几次主从同步报错或延迟,由于没有任何监控和报警机制,只有在应用程序报错的时候才能发现数据同步出问题了。所以写了个shell脚本用来检测mysql数据库的同步状态#!/bin/bash#monitor_mysql_slave statusUSERN…

apscheduler mysql_APScheduler (重点)

定时校正需求: mysql和redis两个系统, mysql增加数据成功, redis未必添加成功, 这样两个系统的数据可能出现偏差, 所以需要定期对mysql和redis的数据进行同步解决方案: 每天执行一次定时任务, 让mysql数据和redis数据进行同步crontab是linux系统一个内置命令, 依赖于linux系统,…

qpsk 锁相环_本科毕业设计课题—QPSK相干解调的MATLAB仿真(4)

继续看参考资料!现在常用的数字调制方式有二相移相键控(BPSK)、正交移相键控(QPSK)、偏移四项移相键控(OQPSK)、最小移频键控(MSK)等。它们具有相同的功率效率。BPSK 频谱利用率差,抗非线性能力差,实现简单;QPSK频谱利用率好&…

c语言程序后退_c语言中向后退一格是啥符号?

展开全部是 \b,也就是backspace,这是一个转义32313133353236313431303231363533e4b893e5b19e31333337393466字符,详解如下:所有的ASCII码都可以用“\”加数字(一般是8进制数字)来表示。而C中定义了一些字母前加"\"来表示…

mysql数据库行业应用_腾讯云发布MySQL 8.0数据库 可应用至更多行业场景

7月8日,腾讯云正式发布了MySQL 8.0数据库。据悉,该数据库相比MySQL官方版本,无论是单机模式、异步模式还是同步模式下,读写性能都取得了大幅提升。据腾讯云数据库相关负责人介绍,采用MySQL 8.0内核的实例最高QPS(每秒查…

中控ecs700 mysql_浙大中控ECS700工程指导手册.pdf

浙大中控ECS700工程指导手册VisualFieldWARNING: Indicates information that a potentially hazardous situation which, if not avoided,could result in serious injury or death.Risk of electrical shock: Indicates information that Potential shock hazard whereHAZARD…