列表框滾動條不會隱藏

我試圖隱藏列表框上的滾動條，除非它是必要的但不能讓它表現。它似乎總是想顯示。我使用的是Chromium，我沒有檢查過其他瀏覽器是否表現正常。列表框滾動條不會隱藏

HTML

<select size="2"> 
    <option>item</option> 
    <option>item</option> 
    <option>item</option> 
    <option>item</option> 
    <option>item</option> 
</select>

CSS

select { 
    width: 200px; 
    min-height: 400px; 
    overflow: auto; 
}

http://jsfiddle.net/jmRmv/

以上代碼生成：

enter image description here

來源

2014-04-01 Lerp

你提到的最小高度：400像素保持較少 – user3217843

這是你在找什麼：http://jsfiddle.net/jmRmv/4/我的意思是你不想顯示其他選項？ –

@SulthanAllaudeen我想隱藏框右側的滾動條。 – Lerp

你可以用一些CSS技巧和一些JavaScript來做到這一點。它可能不是完美的解決方案，但它的工作原理。

JSFiddle demo。

CSS

.wrapper { 
    display: inline-block; 
    vertical-align: top; 
    overflow: hidden; 
    border: solid black 1px; 
} 
.select { 
    width: 200px; 
    min-height: 50px; 
    margin: 0 -20px 0 0; 
} 
.select.scrolling { 
    margin: 0; 
}

HTML

<div class="wrapper"> 
    <select id="select" class="select" size="2"> 
     <option>item 1</option> 
     <option>item 2</option> 
     <option>item 3</option> 
     <option>item 4</option> 
     <option>item 5</option> 
     <option>item 6</option> 
    </select> 
</div>

的JavaScript

var select = document.getElementById('select'); 

if (select.clientHeight < select.scrollHeight) { 
    select.classList.add('scrolling'); // classList: IE9 and higher 
}

來源

2014-04-01 15:36:59

列表框滾動條不會隱藏

回答

相關問題