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

Question

CrimsonWraith

css , html

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

У меня есть <a href="https://jsfiddle.net/tuj6wmoz/1/" rel="nofollow">основа</a> для проекта. Я пытаюсь реализовать функционал, при котором страница прокручивается не полностью, а каждый блок отдельно, так что меню слева и блок с постами имеют независимую прокрутку. 

Подобное решение видно на главной странице YouTube. Я посмотрел в devtools, чтобы понять их подход, но из-за большого количества служебных блоков не сложилось ясного представления. Похоже, их метод заключается в том, что боковому меню и области со списком видео задается фиксированная высота, с использованием z-index для размещения хедера поверх. Также немного непонятно, как они создали промежуток между блоками для размещения хедера без перекрытий. Я видел еще одно решение на Stack Overflow, но в нем не было хедера, и прокручиваемые блоки занимали всю высоту, что не совсем то, что мне нужно.

Я знаю, что для вертикальной прокрутки блоку требуется явная высота, и, установив высоту main-блока как `calc(100vh - 75px)`, я добился желаемого эффекта <a href="https://jsfiddle.net/aby15upn/" rel="nofollow">в этом примере</a>. Однако меня не устраивает, что высота main-блока жестко закодирована, и если высота хедера изменится, это решение перестанет работать. Я хотел бы избежать сложных манипуляций с JavaScript.

Существует ли какой-либо более элегантный способ организовать такую прокрутку?

10 октября 2024 г. 9:34

Ответы на вопрос 2

Похожие вопросы

Answer 1

Да, существует способ организовать независимую прокрутку для блоков с помощью CSS Flexbox или Grid, и без необходимости жестко задавать высоту. Вот пример того, как можно это сделать, чтобы иметь фиксированный хедер и два прокручиваемых блока, которые занимают оставшееся место. 

Ниже приведён пример, как это реализовать с использованием CSS Flexbox:

### HTML

```html
<div class="container">
    <header class="header">Header</header>
    <div class="content">
        <aside class="sidebar">Sidebar</aside>
        <main class="main">Main Content</main>
    </div>
</div>
```

### CSS

```css
* {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    height: 100%;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.header {
    background: #333;
    color: white;
    padding: 15px;
    text-align: center;
    flex-shrink: 0; /* Не сокращаем хедер */
}

.content {
    display: flex;
    flex: 1; /* Занимаем оставшееся пространство */
}

.sidebar {
    background: #f4f4f4;
    width: 250px; /* Ширина сайдбара */
    overflow-y: auto; /* Включаем вертикальную прокрутку */
}

.main {
    flex: 1; /* Занимает оставшееся пространство */
    background: #fff;
    overflow-y: auto; /* Включаем вертикальную прокрутку */
    padding: 15px;
}
```

### Объяснение

1. **Flexbox**: Мы используем Flexbox для создания макета, где хедер занимает фиксированную высоту, а остальная часть страницы делится между сайдбаром и основным контентом.

2. **`flex-shrink: 0;`**: Это свойство для хедера означает, что его высота не будет изменяться. Он будет фиксированной высоты, а остальная часть пространства займет `content`.

3. **`flex: 1;`** для `content`: Этот стиль заставляет содержимое (сайдбар и основной контент) занимать оставшееся пространство после хедера.

4. **`overflow-y: auto;`**: Этот стиль даёт возможность прокручивать сайдбар и основной контент независимо друг от друга.

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

Answer 2

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