css - <选项> 布局是 "magic"吗？

Question

CSS能否实现与<option>一样的布局？ ？

<option> 的存在不影响包含滚动区域的滚动，出现在包含滚动区域之外。

这似乎是一个非常“神奇”的布局，因为我想不出任何其他类型的元素具有相同的布局。

---

编辑: native 选择示例 https://codepen.io/anon/pen/WWJrqR

下拉框布局可以用CSS复制吗？

Answer 1

我的结论是，选择选项框的布局确实无法仅通过 CSS 来实现。

最接近的是使用 JS 来 Hook 滚动处理程序。

https://codepen.io/anon/pen/bJMpGB

<section id="container" class="container">
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
  <p>Four</p>
  <p>Five</p>
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
  <p>Four</p>
  <p>Five</p>
  <p><strong>Select</strong></p>
  <div id="options-container" class="options-container">
    <div class="options">
      <p>One</p>
      <p>Two</p>
      <p>Three</p>
      <p>Four</p>
      <p>Five</p>
      <p>One</p>
      <p>Two</p>
      <p>Three</p>
      <p>Four</p>
      <p>Five</p>
      <p>One</p>
      <p>Two</p>
      <p>Three</p>
      <p>Four</p>
      <p>Five</p>
      <p>One</p>
      <p>Two</p>
      <p>Three</p>
      <p>Four</p>
      <p>Five</p>
    </div>
  </div>
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
  <p>Four</p>
  <p>Five</p>
</section>

.options {
  background: grey;
  border: 1px solid blue;
  height: 500px;
  width: 300px;
  overflow:auto;
}

.options-container {
  position: absolute;
  height: 0;
  left: 30px;
  z-index: 30;
}

.container {
  border: 2px solid black;
  height: 500px;
  overflow: auto;
  width: 400px;
}

p {
  margin-block-start: 1em;
  margin-block-end: 1em;
}

document.getElementById('container')
  .addEventListener('scroll', event => {
    document.getElementById('options-container').style['transform'] =
       'translateY(' + -event.target.scrollTop + 'px)';
  });

不幸的是，这在使用异步滚动处理程序的浏览器中效果不佳；您可以看到滚动框在滚动时稍微跳动。