javascript - 使div仅在悬停时滚动

Question

我的目标是拥有 2 个不同的滚动 div，但我不确定如何准确地做到这一点。我尝试了不同的溢出属性，但我只能让一个溢出属性自行滚动。

.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>

Answer 1

如果我理解正确，应该这样做。我任意给了高度属性。

.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它看起来如何。您需要定位 parent 和 child ，并给他们一些高度，以便溢出可以正常工作。