Как создать вертикальную прокрутку (overflow-y) для одной части блока, при этом оставив другую часть блока статичной?

Question

Богдан

css , html

Как создать вертикальную прокрутку (overflow-y) для одной части блока, при этом оставив другую часть блока статичной?

Как можно реализовать вертикальную прокрутку только для одного блока, оставляя другой блок статичным? У меня есть флекс-блок, который содержит заголовок и список. Я хочу, чтобы при достижении этого флекс-блока основной скролл страницы не продолжался, пока не будет прокручен список, при этом заголовок должен оставаться неподвижным. Как это можно осуществить?

4 октября 2024 г. 16:04

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

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

Answer 1

Для реализации вертикальной прокрутки (overflow-y) для одной части блока, при этом оставляя другой блок статичным, вы можете использовать CSS с flexbox и свойством `overflow`. Вот пример того, как это можно сделать:

### HTML

```html
<div class="flex-container">
    <div class="header">Заголовок</div>
    <div class="content">
        <ul class="scrollable-list">
            <li>Элемент 1</li>
            <li>Элемент 2</li>
            <li>Элемент 3</li>
            <li>Элемент 4</li>
            <li>Элемент 5</li>
            <li>Элемент 6</li>
            <li>Элемент 7</li>
            <li>Элемент 8</li>
            <li>Элемент 9</li>
            <li>Элемент 10</li>
            <!-- Добавьте больше элементов, если необходимо -->
        </ul>
    </div>
</div>
```

### CSS

```css
body {
    margin: 0;
}

.flex-container {
    display: flex;
    flex-direction: column;
    height: 400px; /* Задайте нужную высоту */
    border: 1px solid #ccc;
}

.header {
    background-color: #f1f1f1;
    padding: 10px;
    font-size: 18px;
    flex: 0 0 auto; /* Устанавливает фиксированную высоту заголовка */
}

.content {
    flex: 1; /* Занимает оставшееся пространство */
    overflow-y: auto; /* Включает вертикальную прокрутку */
}

.scrollable-list {
    list-style-type: none; /* Убираем маркеры списка */
    padding: 0;
    margin: 0;
}
```

### Объяснение:
- **Flexbox** используется для создания вертикального макета. Контейнер с классом `.flex-container` задает флекс-контейнер с вертикальной ориентацией (`flex-direction: column`).
- Заголовок (`.header`) остается статичным за счет установки `flex: 0 0 auto`, что позволяет ему занимать только то пространство, которое необходимо, и не растягиваться.
- Блок с классом `.content` занимает оставшееся пространство (`flex: 1`) и получает вертикальную прокрутку с помощью `overflow-y: auto`.
- Список внутри блока `.content` прокручивается, когда количество его элементов превышает высоту доступного пространства.

Теперь при прокрутке страницы сначала будет прокручиваться список, и когда он будет достигнут до конца, прокрутка страницы продолжится.

Answer 2

<html>
<head> 
<style>
body{
overflow:hidden;
height:100vh;
}
.overflow{
min-height:100vh
overflow-y:auto;
}
</style>
</head>

<body>
<div class=“overflow”>
Content 
<div>
</body>
</html>
 
 
 К примеру , задаем для body фиксированную высоту, которая равна высоте экрана. Внутри него создаем блок со свойством: overflow-y:auto , что позволяет скролить, в случае если контент больше высоты экрана. Таким образом - сама страница остается статичной и неподвижной, а скроллинг происходит только контента внутри блока div. 
 
 <html>
<head> 
<style>
body{
display:grid;
overflow:hidden;
height:100vh;
grid-template-columns:200px auto;
}
.no-overflow{

}
.overflow{
min-height:100vh
overflow-y:auto;
}
</style>
</head>

<body>
<div class=“no-scroll”>
Leftblock 
</div>
<div class=“overflow”>
Content 
<div>
</body>
</html>
 
 
 Во втором примере, предварительно сделал сетку на стринце - первый блок (no-overflow) - останется статичным, относительно всей страницы во время скрола