Теперь я создал структуру в реакции, но я не могу представить левую сторону прокрутки, когда правая сторона липкая без используя любую библиотеку.
Код: Выделить всё
.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;
}Код: Выделить всё
ProjectsText 1Text 2Text 3image1Функциональность:
- Заголовок проекта должен располагаться сверху.
- Правая сторона также должна располагаться сверху.
- Левая сторона должна иметь возможность для прокрутки, и текст 1, текст 2 и текст 3 должны появляться один за другим, а остальная часть должна быть прикреплена.
PS: не могу предоставить репозиторий GitHub, поскольку это частный проект.
Примечание. Я использую его в проекте act.js.
Подробнее здесь: https://stackoverflow.com/questions/791 ... ar-to-this
Мобильная версия