Question

我想使用选择框，当溢出时，然后在选择框中显示滚动

CSS

#selectbox{
 width:100%;
 overflow: scroll;
 }

HTML

<div style="width:140px;">
    <select name="selectbox" size="5"  id="selectbox">
        <option value="1">one two three four five six</option>
        <option value="2">seven eight</option>
        <option value="3">nine ten</option>
        <option value="1">one two three four five six</option>
        <option value="2">seven eight</option>
        <option value="3">nine ten</option>
        <option value="1">one two three four five six</option>
        <option value="2">seven eight</option>
        <option value="3">nine ten</option>
        <option value="1">one two three four five six</option>
        <option value="2">seven eight</option>
        <option value="3">nine ten</option>
    </select>
</div>

但只显示垂直滚动。如何解决这个问题？

Answer 1

要快速查看这些更改，请参阅here

这些是变化：

首先看到我已经将css从selectbox更改为div。这是因为我们希望允许在div而不是selectbox中滚动。
使用
```
overflow-x:auto;
overflow-y:auto;
```
设置div的宽度以查看正在工作的滚动。
此处删除了宽度，因为它与之前的定义相冲突。

要查看工作演示：请参阅here

Answer 2

所有其他答案我搜索的不能完全隐藏嵌入式垂直滚动条当你尝试这些div技巧（并且你有奇怪的双垂直滚动条），至少在Firefox中。所以我做了一个，有效，你可以有垂直和horizontad滚动条，但我只在FF测试。另一个问题是当您通过按下＆amp;向下键，它超出了可见区域，它没有自动滚动，所以你需要提供额外的JS代码来处理它。

.block1 {
  max-width: 100px; 
  max-height: 100px; 
  overflow:auto;
  display: block;
}

.block2 {
  display: inline-block; 
  vertical-align: top; 
  overflow: hidden; 
  border-right: 1px solid #a4a4a4;
}

<div class="block1">
    <div class="block2">
      <select multiple style="margin-right:-17px" size="11">
        <option>123</option>
        <option>1234</option>
        <option>12345</option>
        <option>123456</option>
        <option selected>12345777777777777777777777777777</option>
        <option>123458</option>
        <option>123459</option>
        <option>12345</option>
        <option>1234</option>
        <option>123</option>
        <option>12</option>
      </select>
  </div>
</div>

Answer 3

多亏了 coolcoder's answer，我找到了可能的最佳解决方案：

body {
  margin: 0;
  padding: 0;
}

#outerDiv {
  width: 100%;
  height: 100vh;
  display: grid;
}

#innerDiv {
  display: grid;
  overflow: scroll;
}

#multiSelect {
  width: max-content;
  min-width: 100%;
  overflow: scroll;
}

<div id="outerDiv">
  <div id="innerDiv">
    <select id="multiSelect" multiple>
      <option>123</option>
      <option>1234</option>
      <option>12345</option>
      <option>123456</option>
      <option selected>123457777777777777777777777777771234577777777777777777777777777712345777777777777777777777777777123457777777777777777777777777771234577777777777777777777777777712345777777777777777777777777777</option>
      <option>123458</option>
      <option>123459</option>
      <option>12345</option>
      <option>1234</option>
      <option>123</option>
      <option>12</option>
      <option>123458</option>
      <option>123459</option>
      <option>12345</option>
      <option>1234</option>
      <option>123</option>
      <option>12</option>
      <option>123458</option>
      <option>123459</option>
      <option>12345</option>
      <option>1234</option>
      <option>123</option>
      <option>12</option>
      <option>123458</option>
      <option>123459</option>
      <option>12345</option>
      <option>1234</option>
      <option>123</option>
      <option>12</option>
      <option>123458</option>
      <option>123459</option>
      <option>12345</option>
      <option>1234</option>
      <option>123</option>
      <option>12</option>
      <option>123458</option>
      <option>123459</option>
      <option>12345</option>
      <option>1234</option>
      <option>123</option>
      <option>12</option>
      <option>123458</option>
      <option>123459</option>
      <option>12345</option>
      <option>1234</option>
      <option>123</option>
      <option>12</option>
    </select>
  </div>
</div>

JSFiddle

几个注意事项：

它确实需要一个内部和一个外部 div ；我无法以任何其他方式使其正常工作。
当两个滚动条出现时，您必须将水平滚动条一直向右滚动才能看到垂直滚动条（尽管垂直鼠标滚动仍然有效）。这似乎是完全不可避免的......
从好的方面来说，这是完全动态/灵活的。您会注意到我没有设置任何手动 size、width、height 等。
我在这里使用了 display: grid;，但 flex 也可能有效，不确定。我只使用了 grid 是因为 MDN 说它们是二维的，而 flex 是一维的。
似乎上述所有内容的容器也很重要。对我来说，将它全部放在带有 <div> 样式的 display: flex; flex-direction: 2; 中。

选择框html水平滚动

3 个答案: