HTML ListBox'ta Yatay Kaydırma (Kapsayıcı Değil)?

Question

Bazıları uzun etiketleri olan pek çok öğeye sahip bir liste kutum var. Bu yüzden yatay ve dikey olarak kaydırmam gerekiyor.

Liste kutusunu bir dizeye koymayı ve her ikisine de taşma stili uygulama yapmayı denedim, ancak bu sorunla karşılaşıyor. Bölmedeki yatay kaydırma, içerik kutusundan ziyade liste kutusunu kaydırır. Örneğin, kaydırdığımda, liste kutusunun kenarını kaydırma çubuğuyla görüyorum. Bu 2. problemi ortaya çıkarır; Klasörün dikey kaydırma çubuğuna ulaşmak için yatay olarak kaydırmalıyım, çünkü div'in dikey kaydırma çubuğu (varsa), liste kutusunun içindekiler yerine taranır.

Ne hakkında konuştuğum hakkında bir fikir sahibi olmak için try this jsFiddle in FireFox or IE (Chrome çalışıyor).

İşte kod:

div { 
 
    height: 100px; 
 
    width: 300px; 
 
    overflow: auto; 
 
} 
 
select { 
 
    height: 200px; 
 
    overflow: visible; 
 
}

<div> 
 
    <select multiple> 
 
    <option>1 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
    <option>2 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
    <option>3 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
    <option>4 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
    <option>5 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
    <option>6 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
    <option>7 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
    <option>8 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
    <option>9 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
    <option>10 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
    <option>11 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
    <option>12 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
    <option>13 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
    <option>14 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
    <option>15 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
    <option>16 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
    <option>17 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
    <option>18 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
    <option>19 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
    <option>20 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
    <option>21 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
    </select> 
 
</div>

liste kutusu içeriğine etki bir liste kutusu üzerinde yatay ve dikey kaydırma çubukları almanın bir yolu var mı ve bu Chrome'da çalışır IE (eski sürümler hakkında endişelenme), FireFox ve Safari?

Answer 1

İlk olarak, seçimlerin sayısını eşleştirmek için seçimin size attribute değerini ayarlayın. Daha sonra başka bir div ekleyebilir ve kullanılmayan kaydırma çubuğunu az ya da çok kırpmak için kullanabilirsiniz.

Working Example

.wrap { 
 
    height: 100px; 
 
    width: 300px; 
 
    overflow: auto; 
 
} 
 
.crop { 
 
    overflow: hidden; 
 
    display: inline-block; 
 
} 
 
select { 
 
    border: none; 
 
    margin: 0px -20px 0px 0px; /* hide unused scroll bar */ 
 
}

<div class="wrap"> 
 
    <div class="crop"><!-- add a croping container --> 
 
    <select multiple size="21"><!--add size attribute equal to the length of list--> 
 
     <option>1 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
     <option>2 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
     <option>3 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
     <option>4 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
     <option>5 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
     <option>6 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
     <option>7 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
     <option>8 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
     <option>9 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
     <option>10 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
     <option>11 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
     <option>12 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
     <option>13 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
     <option>14 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
     <option>15 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
     <option>16 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
     <option>17 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
     <option>18 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
     <option>19 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
     <option>20 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
     <option>21 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option> 
 
    </select> 
 
    </div> 
 
</div>

Answer 2

.select { 
    height:100px; 
    overflow:scroll; 
}