Html 列表框滚动条赢了'；隐藏

我试图隐藏列表框上的滚动条，除非它是必要的，但无法使其正常工作。它似乎总是想表现出来。我正在使用Chromium，我还没有在其他浏览器中检查它是否正常工作

HTML

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

<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>

上述代码生成：

---

您可以通过一些CSS技巧和一些JavaScript来实现这一点。这可能不是一个完美的解决方案，但它是有效的

CSS

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

.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

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

<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>

项目1
项目2
项目3
项目4
项目5
项目6

JavaScript

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

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

var select=document.getElementById（'select'）；
if（select.clientHeight

您提到了最小高度：400px，请保留，这就是您要找的：我的意思是您不想显示其他选项？@SulthanAllaudeen我想隐藏框右侧的滚动条。