在 reactjs 项目中使用水平滚动

Question

我有一个管理网络应用程序的 reactjs 网络。 main 出现在我的 web 应用程序的每个页面中，如何在我的应用程序中添加水平滚动只修改 main？

Answer 1

我不确定这是否是您想要实现的目标，但从您的解释看来，您似乎想要一个元素，即您的 main 水平滚动，而其他组件保持原位。

如果正确，您可以使用 CSS 将 overflow-x: scroll 添加到您的 main 元素样式中，如下所示：

main {
    overflow-x: scroll
}

或者在您的 JSX 元素上使用 内联样式，如下所示：

<main style={{ overflowX: 'scroll' }} />

只要main 元素的内容超过main 的宽度，您就可以水平滚动。

例如，我的 sn-p 中的顶部 div 比 main 宽（300px vs 200px），因此 main 变为可滚动的。 底部 div 小于 main（100px 与 200px），因此 main 不可滚动，因为它们超出了滚动范围。

const SFC = props => (
  <React.Fragment>
    <main style={{ overflowX: 'scroll' }}>
      <div className="content" style={{ width: '300px' }} />
    </main>
    <main style={{ overflowX: 'scroll' }}>
      <div className="content" style={{ width: '100px' }} />
    </main>
  </React.Fragment>
);

ReactDOM.render(<SFC/>, document.getElementById("react"));

main {
  width: 200px;
  height: 100px;
  background-color: red;
  margin-bottom: 20px;
}

.content {
  height: 50px;
  background-color: blue;
}

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