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

Question

我有两个列表，其中列表 1 中的项目 i 与列表 2 中的项目 i 相关。我希望两个列表都可以垂直滚动，以便项目在两个列表中始终具有相同的滚动位置。但是列表 2 有更多的内容供屏幕显示（比如各种时间轴），所以我希望该列表可以水平滚动（请注意，不是项目本身而是整个列表），而列表 1 保持固定。有没有办法只在 CSS 中做到这一点？这是我到目前为止所拥有的：代码沙盒请注意，这只是为了说明这一点。实际项目是更大的 DOM 结构，而不仅仅是文本。我更新了 codesandbox 来说明这一点。我似乎真的无法让水平滚动正常工作。任何帮助将非常感激。

Answer 1

设置width为一些适当的大值（例如500px），并white-space: nowrap在.rightPaneItem.

请记住，元素的width属性值.rightPaneItem需要根据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>

编辑：

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

您可以在外部容器和元素上添加，而不是在 上设置width和overflow属性。.rightPaneItemoverflow: auto.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。