6

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

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>

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

4

3 回答 3

4

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

这些是变化：

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

  2. 利用

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

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

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

要查看工作演示：请参阅此处

于 2013-06-22T12:32:38.780 回答
4

当您尝试这些 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>

于 2016-12-11T17:08:40.893 回答
0

感谢coolcoder的回答，我发现可能是我们能得到的最好的解决方案：

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's 是因为 MDN 说它们是二维的，而flex's 是一维的。

  5. 似乎以上所有内容的容器也可能很重要。对我来说，把它全部放在一个样式中是很有<div>用的。display: flex; flex-direction: 2;

于 2021-02-23T07:41:51.920 回答