使溢出内容在DIV内滚动

body {
  margin: 0;
}

.box {
  width: 100%;
  overflow: hidden;
}

.box .content {
  width: 50%;
  float: right;
}

#red {
  background-image: url("https://images.unsplash.com/photo-1512389142860-9c449e58a543?ixlib=rb-1.2.1&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb");
  background-size: 100% 100vh; /* make the height 100vh */
  background-attachment:fixed; /* this will do the magic */
}

#blue {
  background: blue;
  min-height:300px;
}

<div class="box" id="red">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
      dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
      occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
      qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

<div class="box" id="blue">
</div>

body {
  margin: 0;
}

.box {
  width: 100%;
  position:relative;
  z-index:0;
}

.box .content {
  width: 50%;
  margin-left:auto;
  overflow:hidden;
  margin-top:-100vh;
}

#red::before {
  content:"";
  position:sticky;
  display:block;
  top:0;
  left:0;
  right:0;
  height:100vh;
  z-index:-1;
  background-image: url("https://images.unsplash.com/photo-1512389142860-9c449e58a543?ixlib=rb-1.2.1&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb");
  background-size: 100% 100%;
}

#blue {
  background: blue;
  min-height:300px;
}

<DIV class=“box”id=“red”>
<DIV class=“content”>
&洛雷姆·伊普索姆·多尔·西特·阿米特,一个敬业的精英,一个在劳勃和多洛尔·马格纳·阿利夸尔工作的年轻人。如果是最小的鹿肉,那么诺斯特鲁德的实验室就不需要支付任何费用。杜伊斯
多洛尔在普瑞米特在色彩斑斓的维利特埃斯西兰多洛尔欧盟福吉特努拉帕瑞图尔。除了西方国家以外,丘比特人没有胆怯,他们在工作中表现得很好。洛雷姆·伊普索姆·多洛尔·西特·阿美,无私的爱
精英们,他们的节奏很快就开始了。如果是最小的鹿肉,那么诺斯特鲁德的实验室就不需要支付任何费用。杜伊斯·奥特·多尔在西兰的性感丝绒上受到谴责。
多洛尔欧夫吉特努拉帕瑞图尔。除了西方国家以外,丘比特人没有胆怯,他们在工作中表现得很好。洛雷姆·伊普索姆·多尔·西特·阿梅特,一位敬业的精英,一位非常出色的节拍演员,在劳勃等人的作品中
多洛尔·马格纳·阿利卡。如果是最小的鹿肉,那么诺斯特鲁德的实验室就不需要支付任何费用。在巴黎的富家大教堂里,有一只可爱的海豚。例外罪名
西方国家的丘比特人不胆怯,阳光普照在办公室里,亵渎了摩利特人的灵魂。洛雷姆·伊普索姆·多尔坐在阿米特的座位上,他是一位敬业的精英,他是一个非常有活力的人。但只有一个小的鹿肉,
诺斯特鲁德在康明多·康塞夸特实习时,不在场。在巴黎的富家大教堂里,有一只可爱的海豚。除了西方国家以外,库皮达特不胆怯,不负责任。
这是我的工作。
& lt;/p & gt;
&L/DIV & GT;
&L/DIV & GT;

<div class=“box”id=“blue”>
&L/DIV & GT;