用透明覆盖物覆盖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就不起作用了。

由于这是一个电子应用程序，任何只适用于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

您可以创建要在其中显示已禁用或非活动的覆盖类

<div class="overlay">

和风格一样

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

问候。

Answer 3

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

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

阻止UI

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

解锁UI

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

Answer 4

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

<div class="column inactive">

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

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

Answer 5

您可以使用您正在使用的绝对定位的想法，并使用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>