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

Question

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

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

但是列表 2 有更多的内容供屏幕显示（比如各种时间轴），所以我希望该列表可以水平滚动（请注意，不是项目本身而是整个列表），而列表 1 保持固定。

有没有办法只在 CSS 中做到这一点？

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

代码沙盒

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

我似乎真的无法让水平滚动正常工作。任何帮助将非常感激。

Answer 1

设置width为一些适当的大值（例如500px），并white-space: nowrap在.rightPaneItem.请记住，元素的width属性值.rightPaneItem需要根据rightPaneItem最长内容的内容进行调整。function App() {&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; <div className="leftPane">&nbsp; &nbsp; &nbsp; &nbsp; LeftPane&nbsp; &nbsp; &nbsp; &nbsp; {new Array(100).fill(0).map((_, i) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div key={i} class="leftPaneItem">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item {i}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div className="rightPane">&nbsp; &nbsp; &nbsp; &nbsp; RightPane&nbsp; &nbsp; &nbsp; &nbsp; {new Array(100).fill(0).map((_, i) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div key={i} class="rightPaneItem">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item {i} with a way longer text so you should be able to scroll&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; horizontally&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; );}ReactDOM.render(<App />, document.getElementById("root"));.App {&nbsp; text-align: center;&nbsp; max-height: 300px;&nbsp; max-width: 300px;&nbsp; display: flex;&nbsp; border: 3px dashed green;&nbsp; overflow: auto;&nbsp; padding: 5px;}.leftPane {&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; height: 100%;&nbsp; flex: 1;&nbsp; border: 2px solid red;&nbsp; padding: 5px;}.rightPane {&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; height: 100%;&nbsp; flex: 2;&nbsp; border: 2px solid blue;&nbsp; padding: 5px;&nbsp; overflow-x: auto;}.leftPaneItem {&nbsp; height: 20px;}.rightPaneItem {&nbsp; height: 20px;&nbsp; width: 500px;&nbsp; overflow-x: hidden;&nbsp; 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.rightPanefunction App() {&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; <div className="leftPane">&nbsp; &nbsp; &nbsp; &nbsp; LeftPane&nbsp; &nbsp; &nbsp; &nbsp; {new Array(100).fill(0).map((_, i) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div key={i} class="leftPaneItem">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item {i}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div className="rightPane">&nbsp; &nbsp; &nbsp; &nbsp; RightPane&nbsp; &nbsp; &nbsp; &nbsp; {new Array(100).fill(0).map((_, i) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (i % 2 == 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div key={i} class="rightPaneItem">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item {i} with a way longer text so you should be able to scroll&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; horizontally&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div key={i} class="rightPaneItem">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item {i} with a way longer text so you should be able to scroll&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; horizontally.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;item {i} with a way longer text so you should be able to scroll&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; horizontally.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;item {i} with a way longer text so you should be able to scroll&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; horizontally&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; );}ReactDOM.render(<App />, document.getElementById("root"));.App {&nbsp; font-family: sans-serif;&nbsp; text-align: center;&nbsp; max-height: 300px;&nbsp; max-width: 300px;&nbsp; display: flex;&nbsp; border: 3px dashed green;&nbsp; overflow: auto;&nbsp; padding: 5px;}.leftPane {&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; height: 100%;&nbsp; flex: 1;&nbsp; border: 2px solid red;&nbsp; padding: 5px;}.rightPane {&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; height: 100%;&nbsp; flex: 2;&nbsp; border: 2px solid blue;&nbsp; padding: 5px;&nbsp; overflow: auto;}.leftPaneItem {&nbsp; height: 20px;}.rightPaneItem {&nbsp; height: 20px;&nbsp; position: relative;&nbsp; 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。