Предотвратить прокрутку с перекрытием

Question

У меня проблема с дизайном в приложении, основной текст прокручивается в моей навигационной и командной строке, и я не знаю, как это исправить.Я не ищу исправления z-index, где основной текст течет внизу, я хочу ограничить верхнюю прокрутку текста наполнителя lorem ipsum чуть ниже командной строки.Основной текст огромен, и необходима прокрутка.В настоящее время это выглядит так:

Навбар CSS:

position: fixed;
width: 100%;
top: 0;

Командная строка:

margin-bottom: 60px;

Текст тела:

position: relative;
min-height: 1px;
padding-left: 8px;
padding-right: 8px;
box-sizing: border-box;
float: left;

Я использую сеточную систему Ui-fabric от Microsoft и при необходимости могу выложить больше кода.Но я надеялся, что будет простой «установить точку останова вертикальной прокрутки для этого div на x пикселей сверху» или что-то в этом роде.Но мне кажется, что я ничего не могу найти.

Думаю, я недостаточно хорошо это понимаю, поэтому, если кто-то сможет объяснить общую картину того, как решить эту проблему с прокруткой, это было бы полезно.

Answer 1

Чтобы начать со смещения основного текста, просто установите для него поле margin-top, равное высоте панели навигации, т.е.

margin-top: 50px;

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

Answer 2

Вы можете ограничить высоту контейнера, в котором находится текст, до определенной высоты, а затем установить переполнение на оси Y для прокрутки, это приведет к желаемому поведению, поскольку прокрутка ограничена контейнером div,таким образом, текст не будет прокручиваться через панель навигации.

Не забудьте соответствующим образом настроить поле сверху, чтобы оно начиналось под панелью навигации и командой.

Пример (при условии, что ваша панель навигации равна 10vh):

#text-container {
  height: 90vh;
  margin-top: 10vh;
  overflow-y: scroll;
}

Есливаша навигационная панель имеет, например, 100px, что вы можете сделать:

height: calc(100vh-100px);
margin-top: 100px;

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

Если появляется горизонтальная полоса прокрутки, вы можете скрыть это с помощью overflow-x: visible; или overflow-x: hidden; в зависимости от желаемого поведения