Прокручиваемая страница с навигационной панелью шириной в процентах - PullRequest
1 голос
/ 10 июля 2020

Цель: создание прокручиваемого контента, перекрываемого такой же широкой панелью навигации. Пример html может выглядеть так:

<div class="scrollable">
  <div class="content"></div>
</div>
<div class="navbar"></div>

Критерии:

  • .content заполняет процентную ширину .scrollable и центрируется по горизонтали
  • .scrollable должен иметь полосы прокрутки
  • .navbar точно такой же ширины, как .content, с точным центром вверху .content
  • Ширина полосы прокрутки должна рассматриваться как неизвестная
  • Избегать javascript выполняется с помощью прокрутки, requestAnimationFrame, setInterval и т.д. c. В идеале нет js.

Самый интуитивный подход не работает, так как полоса прокрутки вызывает несоответствие размеров:

.container {
  position: absolute;
  width: 80%; height: 80%; left: 10%; top: 10%;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3);
}
.scrollable {
  position: absolute;
  width: 100%; height: 100%; left: 0; top: 0;
  overflow: hidden visible;
}
.scrollable > .content {
  width: 80%; margin: 60px auto;
  background-color: rgba(0, 0, 0, 0.2); text-align: center;
}
.navbar {
  position: absolute;
  left: 10%; bottom: 0; width: 80%; height: 50px;
  background-color: rgba(255, 0, 0, 0.3); color: rgba(255, 255, 255, 1);
}
<div class="container">
  <div class="scrollable">
    <div class="content">abcd<br/><br/><br/>abcd<br/><br/><br/>abcd<br/><br/><br/>abcd<br/><br/><br/>abcd<br/><br/><br/>abcd<br/><br/><br/>abcd<br/><br/><br/>abcd<br/><br/><br/>abcd<br/><br/><br/>abcd<br/><br/><br/></div>
  </div>
  <div class="navbar">I am navbar</div>
</div>

Проблема в том, что .content занимает процентную ширину .scrollable ширины за вычетом ширины полосы прокрутки , тогда как .navbar имеет ширину .scrollable в процентах, включая ширину полосы прокрутки.

Как лучше всего обойти это несоответствие?

1 Ответ

0 голосов
/ 15 июля 2020

проверьте ответ в коде: https://codepen.io/the-wrong-guy/pen/vYLzRZZ

И вы должны использовать position: fixed вместо position: absolute, чтобы исправить навигационную панель вверху

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...