实现滚动时向上滑动的文章内容效果

<main>
  <div class="articles">
    <div class="article-container" id="article-container">
      <h1>Article Title</h1>
      <div class="date">21/6/2022</div>
      <div class="article-description">Article Description</div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a typespecimen book.It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently withdesktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy textever since the 1500s, when anunknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Itwas popularised in the 1960s with therelease of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy textof the printing and typesetting industry. LoremIpsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not onlyfive centuries, but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishingsoftware like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
    <div class="article-container" id="article-container">
      <h1>Article Title</h1>
      <div class="date">21/6/2022</div>
      <div class="article-description">Article Description</div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a typespecimen book.It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,</p>
    </div>
  </div>
</main>

body {
  margin: 0;
  overflow: hidden; /* 隐藏body的滚动条 */
}

main {
  display: flex;
  flex-direction: column;
  /* 设置背景图片 */
  background: url("https://source.unsplash.com/iuyR_HEwk24/1600x900") no-repeat center fixed;
  background-size: cover; /* 确保背景图片覆盖整个容器 */
  height: 100vh; /* 设置容器高度为视口高度 */
  overflow-y: overlay; /* 允许垂直方向滚动，并使用overlay滚动条样式 */
}

.articles {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 50vh; /* 将文章内容向下偏移50%的视口高度 */
}

.article-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 15px;
  width: 45vw;
  padding: 30px;
  color: #1a2434;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 15px;
}

.article-container:last-child {
  margin-bottom: 30px; /* 为最后一个文章容器添加底部外边距 */
}