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>

Answer 2

添加背景附件：已固定

<Attribute id="roles" name="roles" nameFormat="urn:oasis:names:tc:SAML:2.0:attrname-format:unspecified" />

在父容器中滚动div右侧

2 个答案: