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

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 sn-ps 中提供了更多我正在使用的代码。 （请注意，我更改了类名以使这个问题更清楚）

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

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

Answer 1

此方案的答案

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

所以基本上没有你的主滚动容器（这里：.big-scrollable）和你想要捕捉到的容器（这里：.column）的子容器可以有一个 overflow 的属性来设置这个工作！

（当然overflow: unset除外）

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

第一个答案（可以忽略）

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

.big-scrollable{
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

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

如果您更喜欢这种行为，也可以与 scroll-snap-type: x proximity; 一起使用。