列表框滚动条不会隐藏

Question

我正在尝试隐藏列表框上的滚动条，除非它是必要的但无法让它表现出来。它似乎总是想表现出来。我正在使用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/

上面的代码产生：

Answer 1

你可以用一些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
}