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的外观。您需要定位父母和孩子，并给他们一些高度，以便溢出可以正常工作。

使div仅在悬停时滚动

1 个答案: