Как я могу позволить прокручивать только определенные компоненты и фиксировать определенные компоненты React? - PullRequest
Новая
       21

Как я могу позволить прокручивать только определенные компоненты и фиксировать определенные компоненты React?

0 голосов
/ 11 марта 2020

Я пытаюсь создать свою собственную версию веб-приложения Spotify с помощью React, и я создал необходимые компоненты для плеера, меню слева и актуальные страницы для художников, треков и других сайтов. , но я пытаюсь расположить их вместе. Как мне настроить, чтобы вы могли прокручивать только определенную часть страницы, как в приложении. Я использовал postion: fixed;, чтобы меню и проигрыватель оставались статичными c при прокрутке страницы, но теперь другие компоненты, отображающие информацию, например альбомы и списки воспроизведения, будут перекрывать плеер и меню. Как это исправить, чтобы меню и проигрыватель не перекрывали другие компоненты, а полоса прокрутки не появлялась на верхней части проигрывателя go, как только я достигал определенной точки?

Вот изображение для справки о том, как оно должно выглядеть. Правая сторона показывает полосу прокрутки и не будет перекрывать игрока никогда. enter image description here

Так выглядит мое приложение, когда я использую только flexbox с компонентами на странице. Плеер и меню с левой стороны отойдут на go, как только вы прокрутите вниз достаточно далеко, и на экране отобразится только меню с артистами и альбомами. enter image description here

На этом третьем рисунке показано, что происходит, когда я занимаю позицию: исправлено меню и проигрыватель, где оно сливается с другими компонентами, такими как список поиска, но если вы прокрутите вниз, плеер и меню останутся на экране, пока компонент поиска перемещается. 

return (
        <div className="App">
            <div className="Menu">
                <Menu />
                <Player className="Player" callbackFromParent={this.callBack}/>
            </div>
            <div className="Component">
                <Router>
                <Route path='/ArtistPage' exact component={ArtistPage} />
                <Route path="/search" exact component={Search} />
                <Route path="/AlbumPage" exact component={AlbumPage}/>
                <Route path="/profile" exact component={Profile} />
                <Route path="/playlistPage" exact component={PlaylistPage}/>
                </Router>
            </div>
        </div>
      );

Это мой код, в котором я попытался разделить меню и плеер вместе с остальными компонентами, которые меняются вместе со страницей. меняется. 

.App {
  display: flex;
  flex-direction: row;
}

.Component {
  vertical-align: left;
}

.Menu {
  display: flex;
  position: fixed;
  flex-direction: column;
}

И это код css, который показывает форматирование для вышеприведенного рисунка компонентов, перетекающих друг в друга. Спасибо за чтение.

1 Ответ

1 голос
/ 11 марта 2020

position: fixed удаляет элемент из обычного потока документа.

В результате остальные элементы ведут себя так, как будто элемент (с position: fixed) не существует, что приводит к перекрытию.

Вы должны будете предоставить поле слева .Component div, равное ширине .Menu div

...