详解滑动穿透(锁body)终极探索

原来是浏览器做的一些优化，chrome passive-event-listeners
Passive Event Listeners是Chrome提出的一个新的浏览器特性：Web开发者通过一个新的属性passive来告诉浏览器，当前页面内注册的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为，Chrome浏览器称这类型的监听器为被动（passive）监听器。
知道问题就好说了，给addEventListener传入第三个参数

document.addEventListener('touchmove', function (event) {
  event.preventDefault()
}, { passive: false })

大功告成！ 突然想到，如果浮层中还需要滚动那就不GG了! so,是不是可以有选择性的禁止滚动（在浮层中元素滚动到最顶部或者最底部之后禁止滚动）。 单独处理浮层中需要滚动的元素；

targetElement.ontouchmove = function (event) {
  const clientY = event.targetTouches[0].clientY - initialClientY
  if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {
    return preventDefault(event)
  }
  if (targetElement && (targetElement.scrollHeight - 1 - targetElement.scrollTop <= targetElement.clientHeight) && clientY < 0) {
    return preventDefault(event)
  }
  event.stopPropagation()
  return true
}

这个方案在ios中完美实现，但是在 android中还是有一点问题；浮层内容拉到最顶部或者最底部的时候依然会带动页面的内容有一定程度的移动。

tua-body-scroll-lock

终极方案来啦!

tua-body-scroll-lock即是在ios、android和PC各个端单独处理，保证在每个端都可以实现完美的效果!

demo

安装

$ npm i -S tua-body-scroll-lock
# OR
$ yarn add tua-body-scroll-lock

使用

移动端

import { lock, unlock } from 'tua-body-scroll-lock'
// 禁止滑动后还需要内部可以滚动的元素(针对移动端ios处理)
const targetElement = document.querySelector("#someElementId");
lock(targetElement)
unlock(targetElement)

PC端

tips: PC端不需要targetElement, 不传targetElement也不想要控制台提示可以传null

import { lock, unlock } from 'tua-body-scroll-lock'
lock()
unlock()

以上所述是小编给大家介绍的滑动穿透(锁body)详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！