关于javascript:iOS-上拉边界-下拉出现-白色空白

66次阅读

共计 758 个字符，预计需要花费 2 分钟才能阅读完成。

起因

手指按住屏幕下拉，屏幕顶部会多出一块红色区域。手指按住屏幕上拉，底部多出一块红色区域。（）

产生起因

在 iOS 中，手指按住屏幕高低拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器 (body) 天然会被拖动，剩下的局部会成空白。

解决方案

监听事件禁止滑动

由此咱们找到解决方案，通过监听 touchmove，让须要滑动的中央滑动，不须要滑动的中央禁止滑动。

值得注意的是咱们要过滤掉具备滚动容器的元素。

vue 中的解决方案如下

    var overscroll = function (el) {el.addEventListener('touchstart', function () {
        var top = el.scrollTop
        var totalScroll = el.scrollHeight
        var currentScroll = top + el.offsetHeight
        if (top === 0) {el.scrollTop = 1} else if (currentScroll === totalScroll) {el.scrollTop = top - 1}
      })

      el.addEventListener('touchmove', function (evt) {if (el.offsetHeight < el.scrollHeight) {evt._isScroller = true}
      })
    }

    overscroll(document.querySelector('.main-container'))
    document.body.addEventListener('touchmove', function (evt) {if (evt._isScroller) return
      evt.preventDefault()}, {passive: false})
    //passive 参数不能省略

正文完