html – 防止{overflow-y：auto} div中的绝对定位元素触发滚动条

因为在滚动期间他们必须重新绘制(并改变位置)与containing block相关的绝对定位元素.

在浮子的存在下发生同样的事情 – 见：

> Why does CSS2.1 define overflow values other than “visible” to establish a new block formatting context?

一种可能的选择是让绝对定位的元素相对于initial containing block(< html>元素所在的位置)而不是位置.

为了实现这一点,我们可以从#dialog-1中删除position：relative,因此绝对定位元素的包含块将是初始包含块.它也随页面一起滚动.

Example Here

function forAllNodes(nodes,fn) {
  Array.prototype.forEach.call(
    nodes,function(node) {
      fn.call(node);
    }
  );
}

var layoutGate = function() {
  forAllNodes(
    document.querySelectorAll('.dropdown-contents'),function() {
      if (this.classList) this.classList.toggle('hide');
    }
  );
};

var intervalId = setInterval(layoutGate,1000);

forAllNodes(
  document.querySelectorAll('.toggle-dropdown-btn'),function() {
    var elm = this;
    elm.addEventListener('click',function() {
      if (intervalId) {
    	clearInterval(intervalId);
   		intervalId = null;    
      }
      layoutGate();
    },false);
  }
);

.wrapper {
  padding-left: 20px;
}

p {
  line-height: 1.3em;
}

#dialog-1 {
  padding: 10px;
  border: 3px solid black;
  width: 400px;
  min-height: 100px;
  max-height: 150px;
  overflow-y: auto;
}

.dropdown-control {
  /* position: relative; */
  margin: 0;
  padding: 0;
}

.toggle-dropdown-btn {
  padding: 0;
  margin: 0;
}

.dropdown-contents {
  list-style-type: none;
  position: absolute;
  /* min-width: 100%; */
  width: 400px;
  background-color: #81d4fa;
  margin: 0;
  padding: 0;
  border: 1px solid green;
  /* top: 100%; */
  /* left: 0; */
}

#dialog-2 {
 padding: 10px;
  border: 3px solid black;
  width: 400px;
  min-height: 100px;
  max-height: 150px;
}

.hide {
  display: none;
}

<div class="wrapper">
  <h1>Div with overflow-y:</h1>
  <div id="dialog-1">
    <p>Stuff in Dialog blah blah</p>

    <div class="dropdown-control">
      <button type="button" class="toggle-dropdown-btn">Toggle Dropdown</button>
      <ul class="dropdown-contents">
        <li>why</li>
        <li>do i </li>
        <li>trigger </li>
        <li>scroll</li>
      </ul>  
    </div>
  </div>

  <h1>Normal div,no overflow-y</h1>
  <div id="dialog-2">
    <p>Stuff in Dialog blah blah</p>
    <div class="dropdown-control">
      <button type="button" class="toggle-dropdown-btn">Toggle Dropdown</button>
      <ul class="dropdown-contents">
        <li>this</li>
        <li>does not </li>
        <li>grow </li>
        <li>the div</li>
      </ul>  
    </div>
  </div>
</div>