如何创建与此类似的卷轴？

Question

我正在尝试创建一个类似的卷轴，如this。

现在我已经在reactjs中创建了一个结构，但是当右侧粘性时我无法在不使用任何库的情况下计算左侧滚动。

.project-section {
  height: 400vh;
  position: relative;
  background-color: lightcoral; 
}

.project-heading {
  display: flex;
  background-color: lightblue;
  font-size: var(--font-size-heading);
}

.project-heading-text {
  font-family: Campton-Font-Bold;
  font-size: var(--font-size-heading);
}

.project-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: 300vh;
  background-color: lightsalmon;
}

.project-container-text {
  display: flex;
  flex-direction: column;
  width: 50%;
  justify-content: center; /* or space-around */
  align-items: center; /* Ensure this has a value, like 'center' */
  height: 300vh;
  border: 1px solid blue;
}

.project-text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  border: 1px solid yellow;
}

.project-container-images {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 50%;
  height: 300vh;
  border: 1px solid green;
  top: 0;
  bottom: 0;
  z-index: 1000;
  position: relative;
}

.project-image {
  display: flex;
  justify-content: center;
  align-content: center;
  width: 100%;
  height: 100vh;
  border: 1px solid black;
  flex-wrap: wrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
<section class="project-section" style="top: 0px;"><div class="project-heading"><span class="project-heading-text">Projects</span></div><div class="project-header"><div class="project-container-text"><span class="project-text">Text 1</span><span class="project-text">Text 2</span><span class="project-text">Text 3</span></div><div class="project-container-images" style="position: initial; top: 0px;"><span class="project-image">image1</span></div></div></section>

功能：

• 项目标题应位于顶部。
• 右侧也应该粘在上面。
• 左侧应该能够滚动，文本1、文本2和文本3应该一一出现，而其余部分应该是粘性的。

额外问题：如上面的链接所示，作为参考，请让我知道如何处理图像堆栈滚动？

PS：无法提供 github 存储库，因为它是私人项目。

注意：我在react.js项目中使用它。

Answer 1

主要技巧是使用容器设置视口的高度并使右侧粘性，而左侧应可通过 y 轴滚动

1. .project-section

   ：将高度设置为100vh，以便占据完整的高度 视口的高度并确保 .project-header 具有 固定高度。

2. .project-header

   ：左侧和右侧的容器 正确的部分。设置全高度 (100%) 和

   overflow: hidden

   以防止滚动。

3. .project-container-text

   ：

   overflow-y: auto

   启用 独立滚动。高度设置为其父级的 100% 容器，因此它不会超出它。

4. .project-container-images

   ：右侧的粘帖部分有

   position: sticky

   和

   top: 0

   将其固定为视口 卷轴。

注意：请在完整窗口中运行代码片段以查看正确的结果。

.project-section {
  height: 100vh; /* Set this to viewport height */
  display: flex;
  flex-direction: column;
  background-color: lightcoral;
}

.project-heading {
  background-color: lightblue;
  font-size: var(--font-size-heading);
  padding: 10px;
}

.project-header {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%; /* Full height to match the viewport */
  overflow: hidden; /* Hide overflow on the main container */
}

.project-container-text {
  width: 50%;
  height: 100%; /* Full height of the container */
  overflow-y: auto; /* Make it scrollable */
  border: 1px solid blue;
}

.project-text {
  height: 100vh; /* Example height for each text block */
  border: 1px solid yellow;
  display: flex;
  justify-content: center;
  align-items: center;
}

.project-container-images {
  width: 50%;
  height: 100%; /* Full height to match the viewport */
  position: sticky;
  top: 0; /* Sticks the element to the top */
  border: 1px solid green;
  display: flex;
  flex-direction: column;
}

.project-image {
  height: 100vh; /* Example height for each image block */
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
<section class="project-section">
  <div class="project-heading">
    <span class="project-heading-text">Projects</span>
  </div>
  <div class="project-header">
    <div class="project-container-text">
      <div class="project-text">Text 1</div>
      <div class="project-text">Text 2</div>
      <div class="project-text">Text 3</div>
    </div>
    <div class="project-container-images">
      <div class="project-image">Image 1</div>
      <div class="project-image">Image 2</div>
      <div class="project-image">Image 3</div>
    </div>
  </div>
</section>