单页应用移动端弹窗穿透解决终极方案

移动端的web项目，大多数会采用单页应用来实现，在布局上也有一定的讲究，从设计角度出发的话，布局大致分为两类，一类是单页全屏，另外一种是内容多的滚动屏。全屏的话，一般布局会采用vh，position等等方式来实现，而滚动屏又会分为两小类，一类是局部滚动，另外一类是全局滚动，一旦页面出现滚动条，并且此页面有弹窗的需求时，穿透这个问题就来了。

一句话总结穿透就是：弹层下的页面滚动会跟随着弹窗的滚动。要解决这个问题，有很多种方案，尤其是在移动端，比如说，设置overflow： hidden， position: fixed 等，这些方案可以解决，但是有后遗症，直接设置会让页面滚动到头部，这个点也是挺令人烦恼的，页面滚动了一定距离之后，弹窗出来了，采用如上方案，页面又滚动回去了。

那如何解决呢，原理也特别简单，以vuejs来举例：

代码如图所示，弹窗出现的时候，给body作fixed定位处理，并记录滚动位置，但弹窗消失时，把定位取消，并将页面滚动到记录位置即可，这种处理方法处理穿透现象时，页面不会有抖动，兼容性极好，不管是全屏滚动，还是页面构建了局部的滚动，这种方法都能通用，它的原理，稍为了解dom结构的人，看一眼都能很清楚的知道。
js就是这样一种很有意思的语言，基础越透彻，越有成就感，哈哈哈

单页应用移动端弹窗穿透解决终极方案相关推荐

VUE单页应用首屏加载速度优化方案
单页应用会随着项目越大,导致首屏加载速度很慢!!!以下给出在下知道的几种优化方案使用CDN资源,减小服务器带宽压力路由懒加载将一些静态js css放到其他地方(如OSS),减小服务器压力按需加 ...
浅谈Vue单页应用首屏加载速度优化方案
心语:最不会利用时间的人,最会抱怨时间不够趁着五一放假,刚好最近天气也是不好,.所以抽出一点时间写一点东西,也算是不辜负这个美好的假期吧!小编也祝愿大家五一快乐,玩得愉快哈随着各大前端框架的诞生以 ...
Nodejs in Visual Studio Code 12.构建单页应用Scrat实践
1.开始随着前端工程化深入研究,前端工程师现在碉堡了,甚至搞了个自己的前端网站http://div.io/需要邀请码才能注册,不过里面的技术确实牛.距离顶级的前端架构,目前博主应该是far away ...
seo需要处理页面html,为什么单页面的seo不友好？如何解决这一问题？
前言大家可能都知道单页面的SEO不友好,但是你有没有思考过为什么单页面的SEO不友好呢?在单页面盛行的今天,有哪些策略来规避掉这一缺点呢?很好奇有木有?那就跟我一起开启探索之旅吧~ 搜索引擎的工作原 ...
关于移动端滚动穿透问题的解决
关于移动端滚动穿透问题的解决移动端滚动穿透问题:在移动端进行fixed弹窗的时候,在弹窗上滑动会导致下层页面跟着滚动,影响用户体验,这种现象称为'滚动穿透'. 三种解决办法中,视需求选择解决办法: ...
为什么单页面的seo不友好？如何解决这一问题？
大家可能都知道单页面的SEO不友好,但是你有没有思考过为什么单页面的SEO不友好呢?在单页面盛行的今天,有哪些策略来规避掉这一缺点呢? 搜索引擎的工作原理在搜索引擎网站的后台会有一个非常庞大的数据库 ...
uniapp 微信小程序和H5的弹窗滚动穿透解决
滚动穿透: 页面里的弹窗也是可以滚动的,然后页面本身内容多所以也是滚动的,就造成,在弹窗滚动的时候,页面内容也跟着滚动了.如图所示 ps: 电脑端分鼠标滚轮滚动和长按鼠标拖拽滚动,手机端只有触屏滑屏滚 ...
以整体思维看问题：解决单页应用，系统角色请求覆盖身份唯一标识（本项目中是session_id命名的）发送请求问题...
以前都是开始一段废话的,现在直接进入主题,首先介绍一下一些概念: 单页应用: 优点: 具有桌面应用的即时性.网站的可移植性和可访问性. 用户体验好.快,内容的改变不需要重新加载整个页面,web应用更具 ...
解决vue单页路由跳转后scrollTop的问题
作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部在我们写路 ...

单页应用移动端弹窗穿透解决终极方案

单页应用移动端弹窗穿透解决终极方案相关推荐

最新文章

热门文章