用透明覆盖物覆盖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中启用 “实验性网络平台功能”：//标志：https://jsfiddle.net/152on3bc/（它会如果你想设置它，也可以在Electron中工作）

所需的效果看起来像这样（同样需要注意的是：chrome：// flags）：https://jsfiddle.net/hawsfL9t/1/但是一旦你滚动左边的div，就不能工作。

由于这是一个电子应用程序，任何解决方案，只适用于铬或电子罚款。使用普通的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

没有可用于透明的div包裹格一个非常有用的jQuery插件是jQuery BlockUI Plugin

通过使用这个插件，你可以在任何元素的运用块UI下面

阻塞UI

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

如前所述

解锁界面

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

Answer 4

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

<div class="column inactive">

在CSS： .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>