内容简介:之前一直做PC系统,目前做移动端也遇到一些问题,本文解决全局滚动即滚动是在在此情况下的弹窗会出现如下问题:
之前一直做PC系统,目前做移动端也遇到一些问题,本文解决 移动端滚动 的糟心问题!
全局滚动
全局滚动即滚动是在 body上的滚动 。如果只有一个全局滚动是没有问题的,问题在于全局滚动的页面出现了 弹窗 如下图所示情景:
在此情况下的弹窗会出现如下问题:
滚动穿透--固定弹窗
啥意思呢,就是在 弹窗 上 点击或滑动 的时候, 底层的全局滚动也会跟着滑动 !!! 刚出现问题的时候也在网上查找了一波,尝试了如下方法:
- 弹窗时给body设置overflow:hidden;(缺点:ios没用)
- 弹窗时给body设置position:fixed;(缺点:滚动位置会丢失,ios没用)
针对此情景的完美解决方法是:
给弹窗加上 @touchmove.stop.prevent
,即可阻止 touchmove
事件传递到 body
,也就解决了 滚动穿透 。
滚动穿透——滚动弹窗
还是这张图,情况就是 弹窗里也是有滚动的 !!!如果使用了 @touchmove.stop.prevent
,那的确可以解决滚动穿透的问题,但是由于阻止 了@touchmove
,自身也 无法滚动 了,不信自己写demo试试~
那针对此种情况 完美解决 方案是: 在弹窗打开的时候给body的全局滚动设置 position:fixed
属性,并 设置top值 ;由于设置了fixed属性,那在弹窗的时候body就没有滚动条了。此时如果这么设置会发现body虽然没有了滚动穿透,但是 原来的位置丢失 了。所以再给body设置fixed属性的时候,要把 当前的滚动位置赋值给css的top属性 ,那在 视觉上就没有任何变化 了。
fixedBody () { let scrollTop = document.body.scrollTop || document.documentElement.scrollTop document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;' } 复制代码
那在弹窗关闭的时候如何处理呢? 弹窗关闭的时候则要 清除fixed固定定位和top值 ;并 设置其滚动位置位置top值 ,则又恢复了滚动功能,而且视觉上没有任何变化,是目前最完美的解决方案!
looseBody () { let body = document.body body.style.position = '' let top = body.style.top document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top) body.style.top = '' } 复制代码
总结
以上两种方案解决了固定弹窗和滚动弹窗对于body全局滚动的影响。文章末尾在针对 vue做一个自定义指令封装 。
局部滚动
局部滚动,还是刚才的图片,在弹窗里的滚动,在Android上滚动没啥问题,但是在 ios局部滚动 有时就会实现。
复现步骤:
- ①从滚动区域外从上往下化
- ②在滑动滚动区域,发现滚动竟然失效了!!!活见鬼了....这TM还是原生属性。多重发几次,一定可以复现的。
解决办法: 使用插件better-scroll,大家伙自己研究文档就行。
vue封装
vue:
directives: { fixed: { // inserted 被绑定元素插入父节点时调用 inserted () { let scrollTop = document.body.scrollTop || document.documentElement.scrollTop document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;' }, // unbind 指令与元素解绑时调用 unbind () { let body = document.body body.style.position = '' let top = body.style.top document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top) body.style.top = '' } } }, 复制代码
自定义指令使用 html:
<div v-if="isShowRecordModal" v-fixed> .... .... </div> 复制代码
该指令的 注意点 是必须使用 v-if
来 开启关闭弹窗 ,因为该指令 依赖于dom的插入和注销 ,使用 v-show
是肯定不行的。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
以匠心,致设计:网易 UEDC 用户体验设计
网易用户体验设计中心 / 电子工业出版社 / 2018-8 / 95.00元
为什么网易云音乐的体验流畅细腻、富有温度?为什么网易严选App的UI设计让人感到温馨、舒适?为什么网易蜗牛读书App的界面设计让用户爱不释手…… 《以匠心,致设计:网易 UEDC 用户体验设计》是网易用户体验设计团队对自身过去的设计思考的精心总结,最大程度还原了网易产品背后的设计故事,内容涵盖设计基础、设计实践、方法思考、成长指南四章,借助网易产品设计的实际案例具体讲述了设计师日常工作中不可......一起来看看 《以匠心,致设计:网易 UEDC 用户体验设计》 这本书的介绍吧!