javascript - CSS 有两个列表，同步它们的垂直滚动，同时允许一个列表水平滚动

Question

我有两个列表，其中列表 1 中的元素 i 与列表 2 中的元素 i 相关。

我希望两个列表都可以垂直滚动，以便元素在两个列表中始终具有相同的滚动位置。

但是列表 2 有更多内容可供屏幕显示(如某种时间轴)，因此我希望该列表可以水平滚动(请注意，不是元素本身，而是整个列表)，而列表 1 保持固定。

有什么方法可以只在 CSS 中做到这一点吗？

这是我到目前为止所拥有的:

Codesandbox

请注意，这只是说明这一点。实际的元素是更大的 DOM 结构，而不仅仅是文本。 我更新了codesandbox来说明这一点。

我似乎无法真正实现水平滚动。任何帮助将不胜感激。

Answer 1

将width设置为某个适当的大值(例如500px)，并在上设置white-space: nowrap。 rightPaneItem.

请记住，.rightPaneItem 元素上的 width 属性值需要根据 rightPaneItem 的内容进行调整内容最长的。

function App() {
  return (
    <div className="App">
      <div className="leftPane">
        LeftPane
        {new Array(100).fill(0).map((_, i) => (
          <div key={i} class="leftPaneItem">
            item {i}
          </div>
        ))}
      </div>
      <div className="rightPane">
        RightPane
        {new Array(100).fill(0).map((_, i) => (
          <div key={i} class="rightPaneItem">
            item {i} with a way longer text so you should be able to scroll
            horizontally
          </div>
        ))}
      </div>
    </div>
  );
}


ReactDOM.render(<App />, document.getElementById("root"));

.App {
  text-align: center;
  max-height: 300px;
  max-width: 300px;
  display: flex;
  border: 3px dashed green;
  overflow: auto;
  padding: 5px;
}

.leftPane {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1;
  border: 2px solid red;
  padding: 5px;
}

.rightPane {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 2;
  border: 2px solid blue;
  padding: 5px;
  overflow-x: auto;
}

.leftPaneItem {
  height: 20px;
}

.rightPaneItem {
  height: 20px;
  width: 500px;
  overflow-x: hidden;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>

编辑:

由于右列中的内容长度可变，因此可以使用以下方法。

您可以在 .rightPaneItem 上添加 overflow: auto，而不是在 .rightPaneItem 上设置 width 和 overflow 属性外部容器 .App 和 .rightPane 元素。

function App() {
  return (
    <div className="App">
      <div className="leftPane">
        LeftPane
        {new Array(100).fill(0).map((_, i) => (
          <div key={i} class="leftPaneItem">
            item {i}
          </div>
        ))}
      </div>
      <div className="rightPane">
        RightPane
        {new Array(100).fill(0).map((_, i) => {
          if (i % 2 == 0) {
             return (
               <div key={i} class="rightPaneItem">
                  item {i} with a way longer text so you should be able to scroll
            horizontally
              </div>);
          } else {
             return (
               <div key={i} class="rightPaneItem">
                  item {i} with a way longer text so you should be able to scroll
            horizontally.                   item {i} with a way longer text so you should be able to scroll
            horizontally.                   item {i} with a way longer text so you should be able to scroll
            horizontally
              </div>);
          }
        })}
      </div>
    </div>
  );
}


ReactDOM.render(<App />, document.getElementById("root"));

.App {
  font-family: sans-serif;
  text-align: center;
  max-height: 300px;
  max-width: 300px;
  display: flex;
  border: 3px dashed green;
  overflow: auto;
  padding: 5px;
}

.leftPane {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1;
  border: 2px solid red;
  padding: 5px;
}

.rightPane {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 2;
  border: 2px solid blue;
  padding: 5px;
  overflow: auto;
}

.leftPaneItem {
  height: 20px;
}

.rightPaneItem {
  height: 20px;
  position: relative;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>

我还在codesandbox上创建了一个演示，该演示与您问题中发布的演示类似，并且使用与第二个代码片段中使用的CSS相同的CSS。