Цель: создание прокручиваемого контента, перекрываемого такой же широкой панелью навигации. Пример 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
в процентах, включая ширину полосы прокрутки.
Как лучше всего обойти это несоответствие?