Пытаюсь создать видеоредактор в React.js, но моя сетка прокручивается неправильно. ⇐ CSS

[Anonymous]

Видеоредактор WIP Изображение Я создаю видеоредактор, подобный веб-приложению, и особое внимание уделяю компоненту временной шкалы и тому, как я размещаю его в HTML и CSS в моем Timeline.jsx. Ниже я могу предоставить часть кода:

Код: Выделить всё

{displayMode === 'timecode'
? `TC: ${formatTimecode(currentFrame, timelineFPS)}`
: `Fr: ${currentFrame}`
}

{renderEntityTrackName()}
{renderTrackNames()}



{selectedTimeline ? (
rulerItems.map((timecode, index) => (

{timecode.timecode}

))
) : (

)}


className="playhead"
style={{ left: `${playheadPosition}px` }}
onMouseDown={(e) => e.preventDefault()}
onMouseMove={handlePlayheadDrag}
>
className="playhead-tail"
style={{ left: `${playheadPosition+scale}px` }}
onMouseDown={(e) =>  e.preventDefault()}
onMouseMove={handlePlayheadDrag}
>


{renderEntityTracks()}

{selectedTimeline ? (
renderTracks()
) : (

)}

CSS для этого следующий:

Код: Выделить всё

.timeline-container {
display: flex;
width: 99vw;
gap: 3px;
height: 525px;
align-items: flex-start;
flex-direction: row;
}

.timeline {
width: 100%;
height: 100%;
display: grid;
overflow-x: hidden;
overflow-y: hidden;
column-gap: 10px;
grid-template-columns: 150px 1fr;
grid-template-rows: 37px 45px 1fr;
border-radius: 10px;
row-gap: 2px;

}

.timeline-tracks {
display: grid;
grid-column: span 2;
grid-row: 3;
//grid-template-columns: 150px 1fr;
grid-auto-rows: min-content;
row-gap: 3px;
overflow: visible;
column-gap: 10px;

}

.timeline-solved-track {
display: grid;
grid-row: 2;
grid-column: span 2;
//grid-template-columns: 150px 1fr;
grid-auto-rows: min-content;
row-gap: 3px;
/* overflow-y: scroll; */
column-gap: 10px;
//overflow-x: hidden;
overflow-y: visible;
position:sticky;

.track {
height: 45px;
min-height: 45px;
background-color: #003006b2;
margin-top: 0;
}

}

.timeline-track-names {
grid-column: 1;
text-align: center;
font-size: 9pt;
align-content: center;
background-color: #1D2833;
border-bottom: #bbbbbb69 0.5px solid;
max-height: 156px;
height: 65px;

}

.timeline-track-names-solves {
height: 45px;
grid-column: 1;
text-align: center;
font-size: 9pt;
align-content: center;

background-color: #1fb601a9;
border-bottom: #bbbbbb69 0.5px solid;
max-height: 156px;
}

.timeline-track-container {
grid-column: 2;
grid-row: 1;
overflow-x: scroll;
height: 525px;
}

.timeline-header {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
align-items: center;
position: sticky;
width: 100%;
background-color: #131B22;
grid-column: 2;
grid-row: 1;
height: 37px;

}

.timeline-ruler {
display: flex;
position: relative;
width: 100%;
height: 35px;
background-color: #131B22;

}

Это дает мне в значительной степени то, что я хочу, а именно сетку из 2 столбцов на 3 строки, в которой затем у меня есть заголовок временной шкалы в первой строке, дорожка решения (постоянная видеодорожка) в второй ряд и мои динамические видеодорожки в третьем ряду с названиями треков, идущими вдоль видеодорожки. Однако с этой настройкой мне приходится выбирать между прокруткой по оси Y, которая будет перемещать заголовок временной шкалы, чего я не хочу, чтобы он оставался статическим при перемещении по оси Y, а затем, когда нам нужно прокрутить влево и вправо, заголовок должен перемещаться. с дорожками на оси X. Я перепробовал так много конфигураций сетки, что мне нужно, чтобы кто-то посмотрел, возможно, упростите структуру div и css, чтобы имена треков перемещались только вверх и вниз, а не влево и вправо, а заголовок перемещался только влево и вправо, но не вверх и вниз. .
Я попытался свести его к более простой структуре HTML и CSS, но это все равно не сработало.

Код: Выделить всё

Timeline Ruler


Track 1
Track 2
Track 3



Track 1 Content
Track 2 Content
Track 3 Content

со следующим CSS:

Код: Выделить всё

.video-editor {
display: grid;
grid-template-rows: auto 1fr;
height: 100vh;
}

.header {
grid-row: 1;
background: #333;
color: white;
padding: 10px;
position: sticky;
top: 0;
z-index: 10;
}

.content {
grid-row: 2;
display: flex;
overflow: auto;
position: relative;
}

.sidebar {
background: #444;
color: white;
position: sticky;
left: 0;
top: 0;
height: 100%;
overflow-y: auto;
}

.track-name {
padding: 10px;
border-bottom: 1px solid #555;
}

.tracks-container {
flex: 1;
overflow: auto;
display: flex;
flex-direction: column;
}

.track {
min-height: 50px;
border-bottom: 1px solid #ccc;
}

Дайте мне более простой макет, но он просто не работает так, как мне нужно. Сейчас я изучаю собственный DOM JS для синхронизации прокрутки, но действительно ли он нужен для того, что я хочу?

Подробнее здесь: https://stackoverflow.com/questions/786 ... g-correctl