html - 在父容器中滚动右侧 div

Question

我正在制作一个类似这个主题的可滚动部分 https://nex.vamtam.com/ (绿色部分“可持续发展目标”)

请看下面是我的代码试图实现右侧 div 不在主绿色容器中滚动。

.scroll{background-color: #28c624; height: 100vh; position: relative;}

.div-left{
    background-color: red;
    width:40%;
    margin: 0px;
    float: left;
    position: sticky;
	will-change: transform, position;
	height: 120px;
	top: 0;
	margin-top: 50px;
	left: 40px;
}

.clear {
    clear: both;
}

.div-right-1{
    background-color: yellow;
    height: 100%;
    width: 50%;
    margin: 0px;
    float: right;
} 

.div-right-2{
    background-color: aqua;
    height: 100%;
    width: 50%;
    margin:0px;
    float: right;
}
.div-right-3{
    background-color: pink;
    height: 100%;
    width: 50%;
    margin:0px;
    float: right;
}

<div class="scroll">   
    <div class= "div-left div-left-small">
      
DELIVERING INNOVATION
Sustainability
goals

We are an integrated engineering company comprised of agile and experienced engineers skilled in different types of engineering work.
    </div>
    <div class= "div-right-1 div-right-1-small">Environment</div>
    
    <div class="clear"></div>
   	
    <div class= "div-right-2 div-right-2-small">Health & Safety</div>
    
    <div class="clear"></div>
    
    <div class="div-right-3 div-right-3-small">Integrity</div>
</div>

Answer 1

您需要使包装容器的高度与右侧所有三项相加的高度相同。我使用了 vh，因为它看起来像是让它们填满屏幕高度，而且 vh 在 CSS 中很容易计算。请参见下面的示例。

.scroll {
  background-color: #28c624;
  height: 300vh;
  position: relative;
}

.div-left {
  background-color: red;
  width: 40%;
  margin: 0px;
  float: left;
  position: sticky;
  will-change: transform, position;
  height: 120px;
  top: 0;
  margin-top: 50px;
  left: 40px;
}

.clear {
  clear: both;
}

.div-right-1 {
  background-color: yellow;
  height: 100vh;
  width: 50%;
  margin: 0px;
  float: right;
}

.div-right-2 {
  background-color: aqua;
  height: 100vh;
  width: 50%;
  margin: 0px;
  float: right;
}

.div-right-3 {
  background-color: pink;
  height: 100vh;
  width: 50%;
  margin: 0px;
  float: right;
}

<div class="scroll">
  <div class="div-left div-left-small">

    DELIVERING INNOVATION Sustainability goals We are an integrated engineering company comprised of agile and experienced engineers skilled in different types of engineering work.
  </div>
  <div class="div-right-1 div-right-1-small">Environment</div>

  <div class="clear"></div>

  <div class="div-right-2 div-right-2-small">Health & Safety</div>

  <div class="clear"></div>

  <div class="div-right-3 div-right-3-small">Integrity</div>
</div>