技术指南：移动端点击穿透、滚动穿透解决方案

前端

2023-12-20 19:29:51

移动端开发中的点击穿透和滚动穿透问题

点击穿透

想象一下你点击某个按钮，但它什么也没做。这是因为点击事件实际上被传递给了按钮背后的另一个元素，也就是所谓的点击穿透问题。

在移动端开发中，点击穿透问题通常是由元素的 pointer-events 属性设置不当引起的。该属性决定了元素是否对点击事件做出反应。有以下几个值：

auto：元素对点击事件做出反应。
none：元素不对点击事件做出反应。
visiblePainted：元素对点击事件做出反应，前提是该元素是可见且已绘制。
visibleFill：元素对点击事件做出反应，前提是该元素是可见且已填充。

要解决点击穿透问题，将需要接收点击事件的元素的 pointer-events 属性设置为 auto，将不需要接收点击事件的元素的 pointer-events 属性设置为 none 即可。

滚动穿透

在滚动穿透问题中，滚动事件会被传递给父元素，而不是当前元素。这会导致当你在一个元素上滚动时，父元素上的滚动条也会滚动，而当前元素上的内容却保持静止。

滚动穿透问题通常是由元素的 overflow 属性设置不当引起的。该属性决定了元素的内容如何处理。有以下几个值：

visible：内容不会被修剪，可能会溢出元素的边界。
hidden：内容会被修剪，不会溢出元素的边界。
scroll：内容会被修剪，并显示滚动条。
auto：内容会根据需要进行修剪，并显示滚动条。

要解决滚动穿透问题，将需要接收滚动事件的元素的 overflow 属性设置为 scroll，将不需要接收滚动事件的元素的 overflow 属性设置为 hidden 即可。

代码示例

以下代码示例演示了如何解决移动端点击穿透和滚动穿透问题：

/* 父元素 */
.parent {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: auto;
}

/* 子元素 */
.child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 需要接收点击事件的元素 */
.clickable {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

在这个示例中，.parent 元素是父元素，.child 元素是子元素，.clickable 元素是需要接收点击事件的元素。通过将 .child 元素的 pointer-events 属性设置为 none 来解决点击穿透问题，通过将 .parent 元素的 overflow 属性设置为 auto 来解决滚动穿透问题。