Используйте горизонтальную прокрутку в проекте ReactionJS

Question

У меня есть веб-сеть activjs, которая управляет веб-приложением. Главное появляется на каждой странице моего веб-приложения. Как я могу добавить горизонтальную прокрутку в моем приложении, просто изменив основное?

Answer 1

Я не уверен, что это то, чего вы хотите достичь, но из вашего объяснения это звучит так, как будто вы хотите, чтобы один элемент, ваша main прокручивалась горизонтально, в то время как другие компоненты остаются на своих местах.

Если это правильно, вы можете просто добавить overflow-x: scroll к вашему main стилевому элементу с помощью CSS следующим образом:

main {
    overflow-x: scroll
}

Или с встроенным стилем вваш элемент JSX выглядит следующим образом:

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

Вы сможете прокручивать по горизонтали до тех пор, пока содержимое вашего элемента main превышает ширину вашего main.

Например, верхняя часть div в моем фрагменте шире, чем main (300 пикселей против 200 пикселей), поэтому 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>