滚动捕捉到嵌套的组件/元素

Question

正如您在 gif 中看到的，我有一个大型的可滚动容器，其中包含几个主要块（“攻击”、“释放”等）。 这些主要块中的每一个都有一个或多个列（在攻击下的“攻击时间”，在“阈值”、“密度”等级别下）

HTML 结构可以概括如下：

<div class="big-scrollable">
  <div class="main-block">
    <h4>Attack</h4>
    <div class="column-container">
      <div class="column">
        <!-- Attack time -->
        <... content ...>
      </div>
      <div class="column shown-when-expanded">
        <!-- Some other column -->
      </div>
    </div>
  </div>
  <div class="main-block>
    <h4>Release</h4>
    <div class="column-container">
      <div class="column">
        <!-- Release time -->
        ...
      </div>
      ...
    </div>
  </div>
  ...
</div>

我希望大的可滚动容器对齐到每个小列（“攻击时间”、“释放时间”、“阈值”、“密度”等）。

我尝试以这种方式为元素设置样式：

.big-scrollable
{
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
}

.column
{
  scroll-snap-align: start;
}

但这行不通。 是否有任何纯 CSS 解决方案？还是我必须用 JavaScript 来解决这个问题？

编辑：

Jonas Weinhardt 提供的 Codepen 示例确实有效，并且似乎包含相同的 CSS。

我在以下 Pastebin 片段中提供了更多我正在使用的代码。 （请注意，我更改了类名以使这个问题更清楚一些）

重要的 HTML：https://pastebin.com/DjvJt8v1

重要的 CSS：https://pastebin.com/tmLQQhbU

Answer 1

此场景的答案

因此，在对真正的 css 类/html 结构（问题中的过去链接）进行了一些尝试后，我发现了问题所在。 T. J. Evers 提供的 .big-scrollable 和 .column 类是正确的，无需更改即可使其正常工作。主要问题是 .column-container 类也设置了 overflow 属性，这破坏了预期的行为。

所以基本上没有您的主滚动容器（此处：.big-scrollable）和您想要捕捉到的容器（此处：.column）的子项可以具有 {{1} 的属性} 设置它的工作！

（当然overflow除外）

带有 html 结构的 Codepen 这个问题有效： https://codepen.io/jonas_weinhardt/pen/mdmqypr

第一个答案（可以忽略）

我做了以下事情，它似乎对我有用：

overflow: unset

如果您更喜欢这种行为，也可以与 .big-scrollable{ overflow-x: scroll; scroll-snap-type: x mandatory; } .column{ scroll-snap-align: start; } 一起使用。