CODEWITHSUNDEEP
javascriptcssreactjs
Blake Engquist
Blake Engquist

Reputation: 47

making divs scroll only on hover

My goal is to have 2 different scrolling divs and I am not sure how to do it exactly. I have tried different overflow properties but I can only get one to scroll on its own.

.profile {
  width: 100%;
  display: flex;
}

.user-posts {
  overflow: hidden;
  width: 80%;
}

.related-artists {
  margin-top: 20px;
  width: 20%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div className="profile">
  <div className="user-posts">
    <ReactCSSTransitionGroup transitionName="slide" transitionEnterTimeout={300} transitionLeaveTimeout={300} transitionAppear={true} transitionAppearTimeout={500}>
      {userPosts}
    </ReactCSSTransitionGroup>
  </div>
  <div className="related-artists">{relatedArtists}</div>
</div>

Upvotes: 2

Views: 389

Answers (1)

Ismail Hakki Tekin
Ismail Hakki Tekin

Reputation: 71

If I understood correctly something like this should do it. I gave height properties arbitrarily.

.profile {
  width: 100%; 
  position: absolute;
  display: flex;
  height: 100%;
}

.user-posts {
  position: relative;
  overflow: auto;
  width: 20%;
  height: 40%;
}

.related-artists {
  position: relative;
  overflow: auto;
  margin-top: 20px;
  width: 20%;
  height: 40%;
}

Here how it looks. You need to position the parent and children, and give them some height so overflow can work properly.

Upvotes: 1

Related Questions