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 を selectbox から div の CSS に変更したことを確認します。これは、selectbox ではなく div でスクロールできるようにするためです。

  2. 使用する

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

  3. 作業中のスクロールを確認するために div の幅を設定します。

  4. 前の定義と競合するため、ここでは width を削除しました。

実際のデモを見るには:こちらを参照してください

于 2013-06-22T12:32:38.780 に答える
4

少なくとも Firefox では、これらの div トリックを試すと (そして、奇妙な二重垂直スクロールが得られます)、埋め込み垂直スクロールバーを完全に非表示にすることはできません。だから私はそれを作った.垂直スクロールバーと水平スクロールバーを持つことができるが、私はFFでのみテストした. もう 1 つの問題は、上下のキーを押して選択範囲を移動し、表示領域を超えたときに自動的にスクロールされなかったため、それを処理するために追加の 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 に答える