Липкий верхний и нижний колонтитулы с пружиной только на контенте с iOS PWA - PullRequest
Новая
       10

Липкий верхний и нижний колонтитулы с пружиной только на контенте с iOS PWA

0 голосов
/ 13 октября 2018

Я пытаюсь собрать эшафот для PWA.Я смотрел на PWA Instagram, и у них есть липкий заголовок (панель приложений) и липкий нижний колонтитул (панель навигации), и только содержимое в середине прокрутки и пружины.У этого также есть надлежащая физика прокрутки выпуска на iOS.Это фантастика.

Я пытался повторить это с Flexbox, и я могу получить основы липкого колонтитула, но механизм прокрутки неверен.С одной стороны, вы не можете выпустить с инерцией прокрутки (физика прокрутки сжимается), а с другой, когда вы достигнете экстента прокрутки, верхний / нижний колонтитул будет прыгать вместе с ним.приемлемо.

http://jsfiddle.net/56cfd93n/21/

#page {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#appbar, #navbar {
  background: #eee;
  height: 32px;
}

#content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

Вот ссылка на PWA в Instagram, у которой нет этих проблем: https://www.instagram.com

Как построить базовыйЭшафот PWA (AppBar, Content, NavBar), который работает правильно на iOS, как PWA в Instagram?

1 Ответ

0 голосов
/ 16 октября 2018

См. Brotkrumen для рабочего решения flex-box, которое делает то, что вы хотите.

...