用透明覆盖覆盖 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:https://jsfiddle.net/152on3bc/ 中启用“实验性 Web 平台功能”（如果您想设置它，它也可以在 Electron 中使用） )

想要的效果看起来像这样（同样的警告：chrome://flags）：https://jsfiddle.net/hawsfL9t/1/ 但是一旦你滚动左边的 div，那个效果就不起作用了。

由于这是针对电子应用程序，因此任何仅适用于 Chrome 或 Electron 的解决方案都可以。使用纯 JavaScript 也可以，不必只使用 CSS。

Answer 1

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

<div class="column inactive">

并在 CSS 中使用：

.inactive {
    opacity: 0.5;
}

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

“使用 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>

Answer 2

有一个非常有用的 jquery 插件可用于用透明 div 包装 div，它是 jQuery BlockUI Plugin

通过使用此插件，您可以在任何元素中应用块 ui，如下所述

阻止用户界面

  $('div.test').block({ 
                    message: '<h1>Processing</h1>', 
                    css: { border: '3px solid #a00' } 
                }); 

解锁界面

$('div.test').unblock(); 

Answer 3

或者你可以添加一个不活动的类。

<div class="column inactive">

在 CSS 中： .inactive { background:rgba(255,255,255,0.5); }

并删除所有文本部分的背景颜色。

Answer 4

您可以使用您正在使用的绝对定位的想法，并使用 JavaScript 将叠加层的高度设置为滚动内容的高度。

var h = document.getElementById('column2').scrollHeight;
var block = document.getElementById('block');
block.style.height = h + 'px';

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

.column {
  overflow-y: scroll;
  position: relative;
}

.block {
  position: absolute;
  background: pink;
  opacity: 0.5;
  width:100%;
}

<div class="container">
  <div class="column">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit urna a purus consequat tristique. Nam sed quam rhoncus, bibendum lacus vel, bibendum ligula. Maecenas semper, libero sit amet pretium ultrices, lorem dui laoreet felis, sed elementum libero orci eget risus. Sed sed mi enim. Ut sit amet est non metus ultrices tristique vel at velit. Praesent ultrices, libero rhoncus congue porta, metus elit pellentesque lectus, id blandit erat sem id nunc. Sed pretium auctor sapien, et molestie dolor aliquet et. Etiam pulvinar tristique nisi, et condimentum neque maximus ut. Integer quis ex lorem. Suspendisse nec arcu ut elit dictum consequat ac ut nibh. Praesent pretium consequat nulla id dictum. Vivamus lobortis ullamcorper nibh, a fringilla ligula interdum vitae. Cras dignissim, mi a hendrerit posuere, mi arcu lacinia dui, placerat ullamcorper dui arcu in ante.
  </div>
  <div class="column" id="column2">
  <div id="block" class="block">
  </div>
  Suspendisse consequat commodo egestas. In consequat augue vel diam fermentum vehicula. Mauris faucibus arcu quam, vitae finibus nulla facilisis non. In ultricies est a justo consectetur, nec volutpat justo varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc suscipit gravida varius. Quisque at tempus nulla, ut mattis eros.
  </div>
</div>

Answer 5

您可以创建要显示禁用或不活动的覆盖类

<div class="overlay">

样式为

.overlay{
    opacity: 0.5;
    pointer-events: none;
}

问候。