Как отключить полосу прокрутки для навигационной панели в HTML/CSS?

Question

Есть шаблон страницы, содержащей навигационную панель и контент отдельными блоками. При переполнении страницы в content появляется полоса прокрутки, которая задевает navbar. Сама полоса прокрутки нужна, но только внутри content, можно ли отображать ее после навигационной панели?

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Asd</title> 
  </head>
  <body>

    <div class="navbar">
      <!-- Моя навигационная панель  -->
    </div>

    <div class="content">
      <!-- Контент  -->
    </div>

  </body> 
</html>

Answer 1

Вот так! Нужно задавать "overflow" не "body", а ".content" и тогда любые объекты внутри, ширина которых шире 100% ".content" будут крутиться.

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Verdana', sans-erif;
  max-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.navbar {
  width: 100%;
  height: 50px;
  background-color: red;
}
.content {
  width: 100%;
  height: 100%;
  background-color: green;
  overflow-y:auto;
}
.content > div {
  width: 100%;
  height: 500px;
  background-color: lightblue;
}

<div class="navbar">
  <div>Моя навигационная панель</div>
</div>

<div class="content">
  <div>Контент</div>
</div>

Answer 2

.navbar {
  background: teal;
  overflow: hidden; /*обрезам все что выходит за рамки нашего блока*/
  width: 100%;
  height: 50px;
}
.content {
  background: #555555;
  height: 100px;
  overflow: auto; /*если контет будет выпирать из блока то будет появлтся скрол*/
}
.content > div {
  width: 1000px;
}

<div class="navbar">
  <div>Панель управлению копаблем </div>
</div>

<div class="content">
  <div>а тут много мусораааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааа a все тут конец</div>
</div>

Answer 3

скролл остается, но убирает полоску справа, надеюсь это имели введу,

.navbar::-webkit-scrollbar{
    display:none;
}

.navbar::-webkit-scrollbar-thumb{
    display:none;
}

а так

.navbar {
 overflow: hidden;
}

или

body {
 overflow: hidden;
}

или

body::-webkit-scrollbar{
    display:none;
}

body::-webkit-scrollbar-thumb{
    display:none;
}

еще можно задать размер ползунка и цвет

body::-webkit-scrollbar {
    width:8px;
    background:#fff
}
body::-webkit-scrollbar-thumb {
    width:8px;
    background:#5bc3cf
}

БЛОГ НА HUSL

Как отключить полосу прокрутки для навигационной панели в HTML/CSS?

Ответы (3 шт):