javascript - 如何使网页中的表格垂直滚动，同时使其他所有内容固定在适当的位置

Question

我想在我的网页中滚动一个特定的表格，用鼠标滚动事件垂直滚动，同时保持包括背景图像在内的所有其他内容固定在适当的位置。

这是我的表格的CSS脚本

@media screen and (min-width: 480px) {
            table{
              background-color: rgba(255, 255, 0, 0.7);
              text-align: center;
              font-family: opensans;
              font-size: 20px;
              color: rgba(0, 0, 0, 255);
              width: 70vw;
              height: 100px;
              overflow-y: scroll;
              overflow-x: hidden;
            }
          }

这是背景和标题的脚本

body{
            background-color: rgba(0, 0, 0, 255);
            background: url("background.jpg");
            background-position: 49% 20%;
            background-repeat: no-repeat;
            background-blend-mode: luminosity;
          }

.Header{
            font-family: Neon;
            font-size: 40px;
            position: fixed;
            letter-spacing: 1px;
            top: 0;
            left: 0;
            width: 100%;
            line-height: 35px;
            text-align: center;
            color: rgb(255, 0, 0);
          }

不幸的是，页眉仍然固定在它的位置，但页面的背景不是。我尝试添加如下固定的背景位置

body{
            background-color: rgba(0, 0, 0, 255);
            background: url("background.jpg");
            background-position: fixed;
            background-repeat: no-repeat;
            background-blend-mode: luminosity;
          }

但是滚动时背景仍然上升(垂直滚动)。

Answer 1

用 overflow-y: auto 将表格包裹在一个 div 中，并将 div 的高度设置为，例如 100px