Как сделать так, чтобы фиксированная позиция шапки не блокировала скролл всей страницы?

Question

Фиксированная позиция шапки не дает скролить страницу. Когда я навожу курсор на шапку, я хочу, чтобы страница скролилась, но из-за того, что шапка перекрывает страницу, страница не скролится. Как это исправить?

html {
      overflow: hidden;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .app {
      height: 100vh;
      overflow-y: scroll;
    }

    .header {
      position: fixed;
      z-index: 10;
      top: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30px;
      background-color: rgba(0, 0, 0, .3);
    }

    .content {
      margin-top: 100px;
    }

    .content > * {
      margin-top: 100px;
    }

<div class="app">
  <header class="header">
    <div class="header__left">
      <button>Button 1</button>
      <button>Button 2</button>
    </div>

    <div class="header__right">
      <button>Button 3</button>
    </div>
  </header>

  <main class="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam culpa cum cupiditate delectus dignissimos
      dolor eum impedit ipsam laudantium nam neque obcaecati odio omnis, quidem rem ullam veritatis vero voluptates.
    </div>
    <div>Architecto, aspernatur consequuntur debitis deserunt earum eveniet exercitationem fugiat hic impedit labore
      maiores molestiae molestias mollitia nisi obcaecati perspiciatis possimus reiciendis, repellendus rerum saepe sit
      soluta tempora ullam vel vero.
    </div>
    <div>Ab ad at dolore fuga in ipsum, iusto modi, molestias nam praesentium qui ratione repellendus ut voluptas
      voluptatibus. Asperiores assumenda dolor ea eum illo illum, in odio repellendus ut vitae.
    </div>
  </main>
</div>

Answer 1

Данная задача легко решаема - pointer-events Вам в помощь:

html {
  overflow: hidden;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.app {
  height: 100vh;
  overflow-y: scroll;
}

.header {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px;
  background-color: rgba(0, 0, 0, .3);
  pointer-events: none; /* Отключаем для "шапки" взаимодействие с курсором */
}
.header * {
  pointer-events: auto; /* Для дочерних элементов восстанавливаем поведение */
}

.content {
  margin-top: 100px;
}

.content>* {
  margin-top: 100px;
}

<div class="app">
  <header class="header">
    <div class="header__left">
      <button>Button 1</button>
      <button>Button 2</button>
    </div>

    <div class="header__right">
      <button>Button 3</button>
    </div>
  </header>

  <main class="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam culpa cum cupiditate delectus dignissimos dolor eum impedit ipsam laudantium nam neque obcaecati odio omnis, quidem rem ullam veritatis vero voluptates.
    </div>
    <div>Architecto, aspernatur consequuntur debitis deserunt earum eveniet exercitationem fugiat hic impedit labore maiores molestiae molestias mollitia nisi obcaecati perspiciatis possimus reiciendis, repellendus rerum saepe sit soluta tempora ullam vel
      vero.
    </div>
    <div>Ab ad at dolore fuga in ipsum, iusto modi, molestias nam praesentium qui ratione repellendus ut voluptas voluptatibus. Asperiores assumenda dolor ea eum illo illum, in odio repellendus ut vitae.
    </div>
  </main>
</div>

БЛОГ НА HUSL

Как сделать так, чтобы фиксированная позиция шапки не блокировала скролл всей страницы?

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