用透明覆蓋物覆蓋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>