Use horizontal scroll in a reactjs project

Question

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?

Luïs · Accepted Answer · 2019-10-08 09:00:00Z

1

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>

edited Oct 8, 2019 at 9:00

answered Oct 8, 2019 at 7:47

Luïs

2,9334 gold badges23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Orbeezniho Over a year ago

Hi, thanks for you answer. My main code is like this : class Main extends Component { render(){ return( <div> <main style={{ overflowX: 'scroll' }}> <Switch> {/* Root path /} <Route exact path='/' component={Login}/> /.............................. .............................. .............................. */ </Switch> </main> </div> ) } } But it doesnt´t work yet. A fault appears in the main tag closure.

Luïs Over a year ago

It appears as if the content in your main does not exceed the boundaries of your main. So overflowX won't do anything as their is nothing to scroll to. I have updated my answer with a code snippet as a demonstration.

Luïs Over a year ago

If my answer solved your problem, please mark my answer as "accepted answer" and give it an upvote. That way I get some reputation for it.

Collectives™ on Stack Overflow

Use horizontal scroll in a reactjs project

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related