时间戳

首页 > 解决方案 > 在 reactjs 项目中使用水平滚动

javascript - 在 reactjs 项目中使用水平滚动

问题描述

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

标签： javascriptjsonreactjsreduxscroll

解决方案

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

如果这是正确的，您可以使用 CSS 简单地添加overflow-x: scroll元素样式main，如下所示：

main {
    overflow-x: scroll
}

或者像这样在 JSX 元素上使用内联样式：

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

只要元素的内容main超过main.

例如，div我的代码片段中的顶部比main（300px vs 200px）更宽，所以它main变成了可滚动的。底部div小于main（100px vs 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>

推荐阅读