Разрешить прокрутку только после достижения высоты в макете CSS - PullRequest
Новая
       56

Разрешить прокрутку только после достижения высоты в макете CSS

0 голосов
/ 10 января 2020

AIM

У меня есть этот код с тремя основными элементами:

  1. Фиксированный заголовок
  2. Раздел сообщения (слева)
  3. Правая боковая панель

Хотелось бы, чтобы высота почтового сечения была меньше высоты правой боковой панели пользователь не сможет прокрутить Поэтому, если есть только один пост и пользователь прокручивает его, он не будет скрыт под заголовком, а в разделе постов будет пустое место.

ПРОБЛЕМА

Я использовал CSS макет сетки, и я не вижу способа обойти это, поскольку столбец и правая боковая панель используют одну и ту же строку. A minmax () на этот раз не справились ...

CODE

(я использую S CSS в качестве препроцессор CSS) А вот кодовая ручка к коду: https://codepen.io/fergos2/pen/Jjjrzor?editors=1100

.container {
  width: 100%;
  margin: 0 auto;
  background-color: #eee;

  display: grid;
  grid-template-rows: min-content 1fr;
  grid-template-columns: 2fr 1fr;
  grid-gap: 15px;

  grid-template-areas: "head head"
                       "main sidebar";

    & > * {
    background-color: lightblue;
    color: #ggg;
    font-size: 15px;
    font-family: sans-serif;
  }
}

.header {
  grid-area: head;
  padding: 20px 0;

  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1; 
  box-shadow: 0 15px #eee;
}

.main {
  grid-area: main;

  .post {
    border: 1px solid blue;
    padding: 30px 0;
    margin-bottom: 15px;
  }
}

.sidebar {
  grid-area: sidebar;
}

.sidebar-inner {
   position: -webkit-sticky;
   position: sticky;
   top: 70px;

  padding: 10px;
  font-size: 30px;
}

<div class="container">

  <header class="header">Header</header>
  <div class="main">
    <div class="post post-1">Post 1</div>
<!--     <div class="post post-2">Post 2</div>
    <div class="post post-3">Post 3</div>
    <div class="post post-4">Post 4</div>
    <div class="post post-5">Post 5</div>
    <div class="post post-6">Post 6</div> -->
  </div>

  <div class="sidebar">
    <div class="sidebar-inner">
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis  nulla pariatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.
    </div>
  </div>

</div>
...