美文网首页
Vue渲染问题以及穿透滚动

Vue渲染问题以及穿透滚动

作者: 念念璇语 | 来源:发表于2019-01-07 14:45 被阅读0次

在IOS上页面上有一个对话框弹出来的时候,这时你在页面上去上下滑动,会发现对话框后面的内容会出现滚动(不论是否有半透明浮层,对话框内容是否能滚动)

如何取解决穿透滚动:

一、若是对话框弹出时的穿透滚动

    1.1 监听函数

1.2 添加和移除事件里面的第二个参数的那个函数要求是同一个函数,然而我封装的两个方法调用的其实是两个不同的函数,这就导致了移除滑动监听事件的时候并没有真正的移除,也就导致了其它页面的滚动出现问题

二、封装的组件穿透滚动

    2.1 明确条件渲染的区别

2.2 选择v-show的时候出现穿透滚动,即在父级滚动的时候打开组件,组件也会出现滚动,目前选择的最快的解决方法是:打开子级组件的时候,将滚动条回到顶部

高是100%,不是可视区域的高 解决方法如下:

如果子组件在一屏上展示,即高为可视区域的高 解决方法

根据CSS3规范,视口单位主要包括以下4个:

vw : 1vw 等于视口宽度的1%

vh : 1vh 等于视口高度的1%

vmin : 选取 vw 和 vh 中最小的那个

vmax : 选取 vw 和 vh 中最大的那个

相关文章

  • Vue渲染问题以及穿透滚动

    在IOS上页面上有一个对话框弹出来的时候,这时你在页面上去上下滑动,会发现对话框后面的内容会出现滚动(不论是否有半...

  • 「Vue」点击滚动页面与$nextTick问题解决

    这一篇主要讲述今天使用Vue点击滚动的实现以及Vue在页面渲染未完成时滚动偏移的问题 页面结构 添加滚动前页面的基...

  • 遮罩以及滚动穿透

    源码速览 全屏源码 遮罩toast在以上代码基础上,将遮罩容器的宽高缩小即可。 考虑因素 全屏 垂直居中内部元素已...

  • 滚动穿透问题

    问题描述 当浮层滚动触底时, 再次滑动浮层时, 浮层下面的页面会进行滚动, 即滚动穿透 解决办法 通过positi...

  • 生活满当当,积攒正能量

    今晚下班后我做了两组腹肌训练洗了个澡泡了个脚思考阻止滚动事件穿透方案使用performance工具分析页面渲染以及...

  • vue中禁止页面发生滚动

    js禁止页面发生滚动以及恢复 vue中禁止页面发生滚动 恢复滚动 总结 在Vue组件一个属性, 用于存储禁止滚动函...

  • 滑轮滚动穿透问题

    滑轮滚动穿透问题 在弹层中若弹框内容过长自带滚动条,在滚动时body内容同样会滚动

  • ios滚动优化

    时常会在ios设备中发现列表渲染出来滑动不顺畅,下面提供ios滚动优化以及滚动回弹

  • 微信小程序用户滑动体验处理

    问题1:当页面出现弹出层,弹出层和底层均有滚动条,滚动弹出层,底层跟着滚动(滚动穿透) 处理:该问题原因是弹出层的...

  • 滚动穿透解决方案

    解决PC/移动端弹出层滚动穿透的问题。 描述 弹出层内容滚动时,body跟随滚动。 方案 法一: overflow...

网友评论

      本文标题:Vue渲染问题以及穿透滚动

      本文链接:https://www.haomeiwen.com/subject/mururqtx.html