移动端放置触摸穿透

在做移动端开发时,经常会遇到滑动弹出层,底部的页面元素也跟着滑动的情景。可采取固定body元素解决此种情况:

    // 固定body的位置,防止移动端导航栏遮罩层弹出后底层页面内容滑动
    function fixBody() {
      var body = document.querySelector("body")
      var top = window.scrollY

      if (body.style.position != "fixed") {
        body.style.position = "fixed"
        body.style.top = -top + "px"
        body.style.left = 0
        body.style.right = 0
      } else {
        top = body.style.top
        top = top.substring(1, top.length - 2)
        body.style.position = ""
        body.style.top = ""
        body.style.left = ""
        body.style.right = ""
        window.scrollTo(0, top)
      }
    }

 

posted @ 2020-09-19 15:40  张哲Zeo  阅读(176)  评论(0)    收藏  举报