美文网首页
H5移动端滚动穿透

H5移动端滚动穿透

作者: 我是_你的范儿 | 来源:发表于2020-05-14 16:14 被阅读0次

加 fixed

弹出层show的时候给bodyfixed
弹出层hide的时候把bodyfixed去掉

加指令

{
    directives: {
      fixed: {
        inserted () { //被绑定元素插入父节点时调用
          let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
          document.body.style.cssText += 'position: fixed; width: 100%; top: -' + scrollTop + 'px;'
        },
        unbind () { //指令与元素解绑时调用
          let body = document.body
          let top = body.style.top
          body.style.top = ''
          body.style.position = ''
          document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top)
          
        }
      }
    }
}
  • 使用方法
<div  v-if="isShow" v-fixed>
    ....
</div>

须使用v-if来隐藏和展示弹窗,因为依赖于dom的插入和注销,使用v-show不行

相关文章

  • H5移动端滚动穿透

    加 fixed 弹出层show的时候给body加fixed弹出层hide的时候把body的fixed去掉 加指令 ...

  • H5 移动端滚动穿透

    一般 H5 常见的活动页,如果当前页面超过一屏,同时在当前页面显示弹窗,整个页面依旧可以滚动 1.功能 常见的活动...

  • 移动端滚动穿透

    这个问题解决N遍了,再此记录下,免得再遇到浪费脑细胞 情况一:弹窗里面没有滚动条 思路:阻止touchmove事件...

  • 移动端滚动穿透问题

    定义:移动端弹出fixed弹窗的话,在弹窗上滑动会导致下层的页面跟着滚动,这个叫“滚动穿透” 解决方案1 在弹出层...

  • 移动端的滚动穿透

    问题:页面很长会有竖向的滚动,有个吸底的工具条,在吸底的工具条内容里手指上下拖动,不拖出外面,也能触发页面的滚动。...

  • 滚动穿透解决方案

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

  • 移动端兼容性问题2 body和html不能禁止滚动条出现

    网页版本没有显示滚动条 但是手机端安卓和ios手机不能禁止滚动条移动端滚动穿透问题完美解决方案html body ...

  • 滚动(移动端滑动)穿透问题

    在项目中遇到很多次滚动穿透问题,每一次都是看情况临时试解决方案能否可行,在这里统一总结一下 pc端model框弹出...

  • 移动端滚动穿透问题完美解决方案

    移动端滚动穿透问题完美解决方案https://uedsky.com/2016-06/mobile-modal-sc...

  • 前端面试每日 3+1 —— 第262天

    今天的知识点 (2020.01.03) —— 第262天 (我也要出题) [html] 移动端滚动穿透是什么原因?...

网友评论

      本文标题:H5移动端滚动穿透

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