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/中启用“实验性网络平台功能”（如果你想设置它也可以在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 Plugin

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

阻止用户界面

chRISING0 = new JCheckBox("RISING");
    chRISING0.addItemListener(new ItemListener() {
        public void itemStateChanged(ItemEvent e) {
                chFR0.setSelected(false);
        }
    });
    chRISING0.setFont(new Font("Tahoma", Font.PLAIN, 9));
    chRISING0.setBounds(42, 15, 84, 23);
    pnlOUT1.add(chRISING0);


chFR0 = new JCheckBox(fpp.loadLanguage("chFR0"));
    chFR0.setFont(new Font("Tahoma", Font.PLAIN, 9));
    chFR0.addChangeListener(new ChangeListener() {
        public void stateChanged(ChangeEvent e) {               
            chRISING0.setSelected(false);
        }
    });
    chFR0.setBounds(42, 35, 67, 23);
    pnlOUT1.add(chFR0);

取消阻止用户界面

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

Answer 4

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

<div class="column inactive">

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

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

Answer 5

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

＆＃13;

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

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

用透明覆盖物覆盖div

5 个答案: