javascript - 用透明的覆盖物覆盖div

我有一个两列布局的页面，其中两列分别滚动，并且具有动态大小。我想用透明的浅灰色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。

最佳答案

您可以将一个类添加到要显示为非 Activity 状态的div中。

<div class="column inactive">

并在CSS中使用:

.inactive {
    opacity: 0.5;
}

如果要使用颜色，可以使用:



*更新了帖子。

希望能帮助到你。 :)

.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>