<option>布局是“魔术”吗？

Question

CSS可以实现与<option>相同的布局吗？

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

这似乎是一个非常“神奇”的布局，因为我无法弄清楚是否有其他元素具有相同的布局。

---

编辑：本机选择https://codepen.io/anon/pen/WWJrqR

的示例

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

Answer 1

我的结论是，选择选项框的布局确实不可能仅通过CSS来生产。

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

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)';
  });

不幸的是，这在使用异步滚动处理程序的浏览器中不能很好地工作。您会看到滚动框在滚动时跳来跳去。