Geek Answers Handbook

Prevent absolutely positioned element in {overflow-y: auto} div from starting scrollbar

Is there a way to prevent an absolutely positioned item from starting the scrollbar when set overflow-y? I was impressed that this is not so, because an absolutely positioned element usually does not affect the width / height of the parent elements. For some reason, this does not seem to matter to determine whether to show the scrollbar on overflow-y: auto. Is there any way around this without placing the popup content in a completely different place in the DOM?

I would like so that only things that would normally enlarge an element can trigger a scrollbar.

overflow-y problem demonstration

Here is the code showing the problem:

http://codepen.io/isaksky/pen/zxedXe

+4
2

IMO overflow, visible, - .

( ) .

- .:

( <html>) .

, position: relative #dialog-1, . .

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>
Hide result
+2

- , , . HTML/CSS, . , , div sibling overflow-y: auto div, , , .

.container { position: relative; }
.scroll-container { overflow-y: auto; border: 3px solid #000; height: 90px; }
.abs { position: absolute; top: 100%; margin-top: -10px; left:0; right:0; background:#0f0; padding: 50px;}
<div class="container">
  
  <div class="scroll-container">
    this <br>
    is <br>
    an <br>
    overflow <br>
    div <br>
    that <br>
    scrolls <br>
  </div><!-- .scroll-container -->
  
  <div class="abs">
    an absolutely positioned div
  </div><!-- .abs -->
  
</div><!-- .container -->
Hide result
0

More articles:


All Articles