我正在尝试创建一个类似的卷轴,如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>
功能:
额外问题:如上面的链接所示,作为参考,请让我知道如何处理图像堆栈滚动?
PS:无法提供 github 存储库,因为它是私人项目。
注意:我在react.js项目中使用它。
主要技巧是使用容器设置视口的高度并使右侧粘性,而左侧应可通过 y 轴滚动
.project-section
:将高度设置为100vh,以便占据完整的高度
视口的高度并确保 .project-header 具有
固定高度。.project-header
:左侧和右侧的容器
正确的部分。设置全高度 (100%) 和 overflow: hidden
以防止滚动。.project-container-text
:overflow-y: auto
启用
独立滚动。高度设置为其父级的 100%
容器,因此它不会超出它。.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>