Div прокрутка, с родителем

Question

У меня есть div.И этот div содержит очень длинный список.Этот список становится автоматически прокручиваемым.

Этот div затем находится внутри другого div, который заполняет весь экран.

Прокрутка работает нормально, но она работает только тогда, когда мышь находится над внутренним div,тот, который на самом деле содержит все данные.

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

Как мнесделать это?

Вы можете увидеть образец здесь: https://openage.org/fs/jsl_forritun/?page=hlutir

Он не прокручивается, когда мышь находится над более темной частью./:

Answer 1

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #2B2832;
}

.main {
  margin: 0 auto;
  padding: 40px;
  width: 700px;
  height: 100vh;
  overflow-y: auto;
  background: #D5BF86;
}

.main ul {
  margin: 0;
  padding: 0;
}

.main ul li {
  list-style: none;
}
.main ul li:nth-child(n+2) {
  margin: 10px 0 0;
}

.main ul li a {
  padding: 10px;
  display: flex;
  color: #000;
  background: #C6B076;
  text-decoration: none;
}

<div class="main">
    <ul>
        <li>
            <a href="javascript:void(0);">Link</a>  
        </li>
        <li>
            <a href="javascript:void(0);">Link</a>  
        </li>
        <li>
            <a href="javascript:void(0);">Link</a>  
        </li>
		    <li>
            <a href="javascript:void(0);">Link</a>  
        </li>
		    <li>
            <a href="javascript:void(0);">Link</a>  
        </li>
		    <li>
            <a href="javascript:void(0);">Link</a>  
        </li>
		    <li>
            <a href="javascript:void(0);">Link</a>  
        </li>
		    <li>
            <a href="javascript:void(0);">Link</a>  
        </li>
		    <li>
            <a href="javascript:void(0);">Link</a>  
        </li>
		    <li>
            <a href="javascript:void(0);">Link</a>  
        </li>
		    <li>
            <a href="javascript:void(0);">Link</a>  
        </li>
		    <li>
            <a href="javascript:void(0);">Link</a>  
        </li>
		    <li>
            <a href="javascript:void(0);">Link</a>  
        </li>
		    <li>
            <a href="javascript:void(0);">Link</a>  
        </li>
        <li>
            <a href="javascript:void(0);">Link</a>  
        </li>
		    <li>
            <a href="javascript:void(0);">Link</a>  
        </li>
		    <li>
            <a href="javascript:void(0);">Link</a>  
        </li>
        <li>
            <a href="javascript:void(0);">Link</a>  
        </li>
		    <li>
            <a href="javascript:void(0);">Link</a>  
        </li>
		    <li>
            <a href="javascript:void(0);">Link</a>  
        </li>
        <li>
            <a href="javascript:void(0);">Link</a>  
        </li>
		    <li>
            <a href="javascript:void(0);">Link</a>  
        </li>
		    <li>
            <a href="javascript:void(0);">Link</a>  
        </li>
    </ul>
</div>

Answer 2

Выполните следующие действия:

• удалите свойства CSS из элемента BODY {height: 100%}

• удалить{max-width: 800px} и добавьте CSS в элемент id = "initial_screen_base":

  div # initial_screen_base {max-width: 100vw;обивка: 0px 20vw;цвет фона: RGB (43, 40, 50);}

  • если вы хотите, чтобы он был максимальным всегда до 800px (для небольших устройств это будет полная ширина), сделайте это так:

  div # initial_screen_base {backgroundцвет: rgb (43, 40, 50);максимальная ширина: 100vw;отступы: 0;отступ справа: calc ((100% - 800px) / 2);отступ слева: calc ((100% - 800px) / 2);}

• для вашего id = "node":

  div # node {background-color: rgb (213, 191, 134);}

Вы должны удалить встроенный CSS и поместить их в style TAG внутри вашей ГОЛОВКИ.Таким образом, вы сможете добавить более понятный код для редактирования.

Answer 3

у вас есть два div, которые содержат ваше тело содержимого

1. id = "nhreyfing"

дайте ему этот стиль padding: 0 20vw; background: black или что бы вы ни добавилиего

id = "content"

дай ему свой фон RGB (213, 191, 134)