Div 滚动，parent

Question

我有一个div。而这个 div 包含一个很长的列表。此列表自动变为可滚动。

这个 div 然后在另一个 div 里面，它填满了整个屏幕。

滚动效果很好，但只有当鼠标悬停在内部 div 上时才有效，它实际上包含所有数据。

但我希望滚动能够工作，当鼠标悬停在 parent div 上时，也就是填满整个屏幕的那个。

我该怎么做？

您可以在此处查看示例： https://openage.org/fs/jsl_forritun/?page=hlutir

当鼠标在较暗的部分时不滚动。 /:

Answer 1

您有两个包含内容正文的 div

id="nhreyfing"

给他这样的风格padding: 0 20vw; background: black 或者你想给他什么填充

id="content"

给他你的 rgb(213, 191, 134) 背景

Answer 2

* {
  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 3

执行以下操作：

从中删除 CSS 属性 BODY元素{高度:100%}
删除 {max-width: 800px} 并添加 CSS 到 id="initial_screen_base" 元素:

div#initial_screen_base{ 最大宽度：100vw；填充：0px 20vw；背景色：rgb(43, 40, 50)； }
- 如果你希望它始终最大为 800 像素（对于较小的设备，它将是全宽），请将其设置为：
div#initial_screen_base{ 背景色：rgb(43, 40, 50)；最大宽度：100vw；填充：0； padding-right: calc((100% - 800px)/2); padding-left: calc((100% - 800px)/2); }
你的id="node":

div#node { 背景色：rgb(213, 191, 134)； }

您应该删除内联 CSS 并将它们放在 HEAD 内的 style TAG 中。这样你会喜欢更清晰的代码供自己编辑。

Div 滚动，parent

Div scrolling, with parent

html

css

mouse

scroll