javascript - 用透明覆盖层覆盖 div

Question

我有一个具有两列布局的页面，其中两列单独滚动，并且具有动态大小。我想用透明的浅灰色 div 覆盖其中一列，使其看起来不活动。

布局是使用 CSS 网格布局完成的。

<div class="container">
  <div class="column">
    Left content
  </div>
  <div class="column">
    Right content
  </div>
</div>

CSS:

.container {
  display: grid;
  grid-template-columns: calc(50%) calc(50%);
  grid-template-rows: 100%;
  height: 100px;
}

.column {
  overflow-y: scroll;
}

这里有一个 JSFiddle，但它只能在 Chrome 中使用，并且您必须在 chrome://flags 中启用“实验性 Web 平台功能”:https://jsfiddle.net/152on3bc/ (如果你想设置的话，它也可以在 Electron 中使用)

所需的效果如下所示(同样的警告:chrome://flags):https://jsfiddle.net/hawsfL9t/1/但是一旦你滚动左侧 div，这个就不起作用了。

由于这是一个 Electron 应用程序，任何仅适用于 Chrome 或 Electron 的解决方案都可以。使用纯 JavaScript 也可以，不需要只使用 CSS。

Answer 1

您可以向要显示为非事件状态的 div 添加一个类。

<div class="column inactive">

并在 CSS 中使用:

.inactive {
    opacity: 0.5;
}

如果你想使用颜色，你可以使用:

"Transparency using RGBA".

*更新了帖子。

希望有帮助。 :)

.container {
  display: grid;
  grid-template-columns: calc(50%) calc(50%);
  grid-template-rows: 100%;
  height: 100px;
}

.column {
  overflow-y: scroll;
}


.left {
  float: left;
  width: 50%;
  }

.right {
  float: right;
  width: 50%;
  }

.inactive {
  background: rgba(76, 175, 80, 0.5);
  opacity: 0.5;
  }

<div class="container">
  <div class="column left">
    <p>Left content<br><br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec massa enim. Aliquam viverra at est ullamcorper sollicitudin. Proin a leo sit amet nunc malesuada imperdiet pharetra ut eros.</p>
  </div>
  
  <div class="column right inactive">
    <p>Right content<br><br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec massa enim. Aliquam viverra at est ullamcorper sollicitudin. Proin a leo sit amet nunc malesuada imperdiet pharetra ut eros.</p>
  </div>
  
</div>