Как заставить отдельные блоки прокручиваться независимо?

Question

[johnymkp]

Вот основа.
Пробую сделать так, чтобы страница крутилась не целиком, а каждый блок отдельно (меню слева и блок с постами должны иметь независимую прокрутку).

Подобное можно видеть на главной странице ютуба. Через devtools посмотрел как сделано, но из-за кучи служебных блоков может не понял их идею до конца, но мне показалось, что там просто грязные хаки: боковому меню и области со списком найденных видео поставлена явная высота, а хедер просто через z-index поверх них. К тому же не понятно тогда как они сделали зазор в блоках, чтобы сверху была пустота, поверх которой расположится хедер. Еще видел решение на stack'е, но там нет хедера и прокручиваемые блоки тоже растянуты на всю высоту, так что это другое.

Я понимаю, что для того, чтобы блок стал прокручиваемым по вертикали, он должен переполниться, а для этого ему надо поставить явную высоту. Мне удалось добиться нужного эффекта вот так, задав main-блоку высоту как `calc(100vh - 75px)`. Однако решение мне не нравится тем, что приходится по сути хардкодить высоту main-блока. Если высота хедера изменится, работать не будет. Через js тем более не хотелось бы изворачиваться.

Есть ли какой-нибудь более аккуратный способ сделать такую прокрутку?

Answer 1

[Сергей delphinpro]

Сделайте раскладку на гридах, нужным блокам задайте overflow:auto

Comments

[johnymkp]

Сергей delphinpro, Решение интересное, попробовал - получилось. Но есть несколько вопросов:
1) Использовать гриды для создания сетки - это нормально? Просто помню, что когда-то давно считалось, что использовать таблицы для верстки - это моветон. А гриды вроде как преемник таблицы. Удобен для отображения товаров в виде колонок-строк, а вот именно для верстки самой сетки страницы я пока не встречал гриды.
2) Как поступать в случае адаптивности? Например, если в моем примере с флексами мне надо скрыть боковое меню, я просто ставлю `display: none` и оно исчезает, а блок контента безо всяких дополнений просто растягивается по всей ширине. В случае с гридом же блок контента становится урезанным по горизонтали.

[Сергей delphinpro]

1) Гриды как раз и создавались для реализации сеток (раскладок)
2) Ну так же, меняешь сетку.

@media (max-width: 500px) {
  .layout { grid-template-columns: 100%; }
  .header { grid-column: span 1; }
  .aside { display: none; }
}

Но лучше писать от меньшего к большему. Сначала стили для мобилы (они обычно попроще), а потом через медиа для десктопа.

.layout { display: block; }
.aside { display: none; }

@media (min-width: 500px) {
  .aside { display: block; }
  ... и дальше все из примера выше

}

[szQocks]

johnymkp,

1) Использовать гриды для создания сетки - это нормально?

нормально

умение фильтровать хорошую и плохую инфу в инете тоже надо, так не только хорошее но и плохое бывают могут написать

2) Как поступать в случае адаптивности? Например, если в моем примере с флексами мне надо скрыть боковое меню, я просто ставлю `display: none` и оно исчезает, а блок контента безо всяких дополнений просто растягивается по всей ширине. В случае с гридом же блок контента становится урезанным по горизонтали.

как вариант

.layout {
  height: 100vh;
  height:100dvh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 1rem 2rem;
}

в целом тебе подсказали, там уж сам чуть чуть подумай, где-то не нравиться - поправь

[szQocks]

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

просто бывал у меня блок который скролился и в нём было 50 иконок svg, и тут сайт просто отлетел, мне пришлось уменьшать кол-во иконок + все их переделывать в png