CODEWITHSUNDEEP
javascriptjsonreactjsreduxscroll
Orbeezniho
Orbeezniho

Reputation: 21

Use horizontal scroll in a reactjs project

I have a reactjs web that manages a web app. The main appears in every page of my web app, how can I add a horizontal scroll in my app just modifying the main?

Upvotes: 1

Views: 2316

Answers (1)

Luïs
Luïs

Reputation: 2833

I am uncertain if this is what you want to achieve, but from your explanation it sounds as if you want one element, your main to scroll horizontally while the other components stay where they are.

If this is correct, you can simply add overflow-x: scroll to your main element styling with CSS like this:

main {
    overflow-x: scroll
}

Or with inline styling on your JSX element like this:

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

You will be able to scroll horizontally as long as the content of your main element exceeds the width of your main.

For example, the top div in my snippet is wider than the main (300px vs 200px), so the main becomes scrollable. The bottom div is smaller than the main (100px vs 200px), so the main isn't scrollable as their is nothing outside of it's boundary to scroll to.

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>

Upvotes: 1

Related Questions