穿越移动端“滚动穿透”的迷雾：通向开发成功的坦途

前端

2023-01-25 23:30:10

移动端“滚动穿透”现象揭秘

深入挖掘“滚动穿透”的原理

在移动端开发中，我们时常会遇到令人头疼的“滚动穿透”问题。当用户滚动某个可滚动区域时，却不小心滚动到了另一个可滚动区域，导致页面错乱或内容丢失。究其原因，是两层或多层可滚动容器互相争夺滚动权限，导致滚动事件被错误地传递。

为了深入理解“滚动穿透”的原理，让我们想象一个嵌套的滚动容器场景：

外层容器：具有垂直滚动条。
内层容器：位于外层容器内，也具有垂直滚动条。

当用户在内层容器中滚动时，浏览器会尝试确定滚动事件的真正目标。如果内层容器在层次结构中高于外层容器，则滚动事件将被传递给内层容器。否则，滚动事件将被传递给外层容器。

antDesign 源码中揭示的“滚动穿透”解决方案

幸运的是，在 antDesign 的源码中，我们能够找到一个通用的解决方案来应对“滚动穿透”问题。这个解决方案的原理是通过修改 CSS 属性 overflow-anchor 的值，来强制浏览器将滚动事件传递给特定的容器。具体来说，我们可以将 overflow-anchor 的值设置为 auto，这样浏览器就会自动确定滚动事件的真正目标，并将其传递给目标容器。

实现“滚动穿透”解决方案的步骤

确定滚动容器。 首先，我们需要确定哪些容器是可滚动的。我们可以通过检查 CSS 属性 overflow 的值来做到这一点。如果 overflow 的值为 scroll 或 auto，那么该容器就是可滚动的。
为滚动容器添加 CSS 样式。 接下来，我们需要为可滚动的容器添加 CSS 样式。我们可以使用以下代码来实现：

.scrollable-container {
  overflow-anchor: auto;
}

应用 CSS 样式。 最后，我们需要将 CSS 样式应用到我们的组件中。我们可以使用以下代码来实现：

import { css } from 'styled-components';

const scrollableContainer = css`
  overflow-anchor: auto;
`;

const MyComponent = () => {
  return (
    <div className={scrollableContainer}>
      ...
    </div>
  );
};