Вёрстчики, вопрос к вам

Question

Вёрстчики, вопрос к вам

Платон Бабадей Ученик (97), на голосовании 2 месяца назад

Верстаю сайт, там все блоки div внесены в один общий. Хочу сделать чтобы сайт листался только в одном определённом диве (или в нескольких) но весь сайт не листался. Пытался использовать overflow: hidden, но если поставить его в css-е, в блоке *{}, весь сайт не листается и даже мои дивы, где стоит overflow: scroll;. Как можно реализовать?

Answer 1

Чтобы сделать так, чтобы прокрутка происходила только в определённом блоке (или нескольких блоках), а не на всей странице, вам нужно использовать свойство 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, что позволяет прокручивать содержимое только в этом блоке.

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

Answer 2

ты overflow: hidden ставь на body

 body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

а на контейнер для встроенного блока накладывай нужный скролл

 #container-scroll {
  overflow-y: auto;
}

Answer 3

*{}... жесть! чувак, у тебя проблемы* с логикой и, как следствие, - конкретно с башкой... иди в грузчики что ль...
*"верстчики"... лля... боксер что ль? тебя в голову много и долго били?!