Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<iframe width=400 height=400 srcdoc="
  <button class=anchor popovertarget=foo>Anchor</button>
  <div id=foo popover>
    This popover (position:fixed) should be completely
    below the button (not overlap it), should be scrollable,
    and should stretch to the bottom of the viewport at
    the position it's opened into.
    <ul>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
    </ul>
  </div>
  <style>
  body {
    width: 800px;
    height: 800px;
  }
  .anchor {
    anchor-name: --anchor;
    position:relative;
    top:180px;
    left:150px;
    width:100px;
    height:50px;
  }
  [popover] {
    border: 1px solid blue;
    position-anchor: --anchor;
    position-area: bottom span-right;
    position-try-fallbacks: --bottom-scrollable;
    overflow: auto;
    height:100%;
  }
  @position-try --bottom-scrollable {
    align-self: stretch;
  }
  </style>
  <script>
    window.scrollTo(50,100);
  </script>
"></iframe>
  
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers