选择框html水平滚动

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

感谢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

几个注意事项：

1. 它确实需要一个内部和一个外部div 两者；我无法以其他任何方式让它如此好地工作。

2. 当两个滚动条出现时，您必须将水平滚动条一直向右滚动才能看到垂直滚动条（尽管垂直鼠标滚动仍然有效）。这似乎是完全无法避免的......

3. 从好的方面来说，这是完全动态/灵活的。你会注意到我没有设置任何手册size、width、height等。

4. 我在这里使用了display: grid;，但flex 可能也可以，但不确定。我只使用 grid 的，因为 MDN 说它们是二维的，而 flex 是一维的。

5. 似乎以上所有内容的容器也很重要。对我来说，将其全部放在带有display: flex; flex-direction: 2; 样式的<div> 中。

Answer 2

当您尝试这些 div 技巧（并且您得到奇怪的双垂直滚动条）时，我搜索的所有其他答案都无法完全隐藏嵌入式垂直滚动条，至少在 Firefox 中是这样。所以我做了一个，它可以工作，你可以有垂直和水平滚动条，但我只在 FF 中测试过。另一个问题是当您通过按向上和向下键移动选择并且超出可见区域时它不会自动滚动，因此您需要提供额外的 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

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

这些是变化：

1. 首先看到我已将 CSS 从选择框更改为 div。这是因为我们希望允许在 div 上而不是在选择框中滚动。

2. 使用

   overflow-x:auto;
   overflow-y:auto;
   

3. 设置 div 的宽度以查看工作中的滚动。

4. 此处删除了宽度，因为它与之前的定义相冲突。

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