Ученик (97), на голосовании 3 месяца назад
Вёрстчики, вопрос к вам
Верстаю сайт, там все блоки div внесены в один общий. Хочу сделать чтобы сайт листался только в одном определённом диве (или в нескольких) но весь сайт не листался. Пытался использовать overflow: hidden, но если поставить его в css-е, в блоке *{}, весь сайт не листается и даже мои дивы, где стоит overflow: scroll;. Как можно реализовать?Ответы
Чтобы сделать так, чтобы прокрутка происходила только в определённом блоке (или нескольких блоках), а не на всей странице, вам нужно использовать свойство overflow только для тех блоков, в которых вы хотите разрешить прокрутку. Вот пример, как это можно сделать:
Убедитесь, что у вашего контейнера, в котором вы хотите разрешить прокрутку, есть фиксированная высота. Это необходимо, чтобы прокрутка работала.
Установите overflow: auto или overflow: scroll для этого контейнера.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Прокрутка в определённом блоке</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
height: 100vh; /* Высота контейнера на весь экран */
overflow: hidden; /* Отключаем прокрутку для всего тела */
}
.scrollable {
height: 300px; /* Фиксированная высота для прокручиваемого блока */
overflow: auto; /* Включаем прокрутку только для этого блока */
border: 1px solid #ccc; /* Для наглядности */
}
</style>
</head>
<body>
<div class="container">
<div class="scrollable">
<p>Содержимое блока 1</p>
<p>Содержимое блока 2</p>
<p>Содержимое блока 3</p>
<p>Содержимое блока 4</p>
<p>Содержимое блока 5</p>
<p>Содержимое блока 6</p>
<p>Содержимое блока 7</p>
<p>Содержимое блока 8</p>
<p>Содержимое блока 9</p>
<p>Содержимое блока 10</p>
</div>
</div>
</body>
</html>
В этом примере: - body имеет overflow: hidden, что отключает прокрутку для всей страницы.
- .scrollable имеет фиксированную высоту и overflow: auto, что позволяет прокручивать содержимое только в этом блоке.
ты overflow: hidden ставь на body
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
а на контейнер для встроенного блока накладывай нужный скролл #container-scroll {
overflow-y: auto;
}
*{}... жесть! чувак, у тебя проблемы* с логикой и, как следствие, - конкретно с башкой... иди в грузчики что ль...
*"верстчики"... лля... боксер что ль? тебя в голову много и долго били?!
Все вопросы
Категории
Избранные