如何在 IE 的选择框中获取水平滚动条？

Posted 2023-03-04

【中文标题】如何在 IE 的选择框中获取水平滚动条？

【英文标题】：How to get horizontal scroll bar in select box in IE?

【发布时间】：2011-12-16 14:21:50

【问题描述】：

我尝试实现以下代码

<div class="functionitem" id="selector_cat">
  <select name="sets" style="overflow:auto;width:100px;">
    <option value="general">happy holiday</option>
    <option value="garden">Garden</option>
    <option value="Lunch">Lunch</option>
    <option value="nice day">A nice day out with my friend on the beach</option>
  </select>
</div>

第4个选项菜单的右边部分不见了，谁能告诉我在IE中使水平滚动工作，如果不能，有没有其他方法可以工作，谢谢！

抱歉有任何混淆，我想要的是下拉框中的水平滚动条，我希望它固定宽度 100px；但我想显示整个内容，我假设用户如果想在下拉选择框中看到整个句子，可以向右滚动，

【问题讨论】：

谁能帮帮我，非常感谢！

【参考方案1】：

我不太确定你想要达到什么目的。这只是一个select 列表。只需删除您的样式，它就会自动根据您的内容调整大小。

编辑

使包含列表的容器滚动。注意：它的可用性有些问题，所以我会在页面上实现类似的东西之前寻找另一种解决方案。

<div id="selector_cat"> 
    <select name="sets">
        <option value="general">happy holiday</option>
        <option value="garden">Garden</option>
        <option value="Lunch">Lunch</option>
        <option value="nice day">A nice day out with my friend on the beach</option>
    </select>
</div>

#selector_cat
    width: 100px; 
    overflow: auto;

【讨论】：

谢谢，抱歉我的描述，我想要的是下拉框中的水平滚动条，我希望它固定宽度 100px；但我想显示整个内容，如果用户想在下拉选择框中查看整个句子，我假设用户可以向右滚动，谢谢。

我根据您的反馈进行了编辑。您使包含列表的容器滚动。请注意，它的可用性有些问题，所以我会在页面上实现类似的东西之前寻找另一种解决方案。

谢谢，您指的是哪种解决方案？

@smith 选择框的水平滚动。但是，如果您的页面空间不足，也许它会工作得很好:)

【参考方案2】：

用 JQuery 试试：

<div id='test' style="overflow-x:scroll; width:120px; overflow: -moz-scrollbars-horizontal;">
<select id='mySelect' name="mySelect" size="5">
    <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 id="divv" style='font-size: 1px'>&nbsp</div>
</div>

<script>
    $('#divv').css('width', $('#mySelect').outerWidth());
    $('#mySelect').css('width', $('#test').outerWidth());
    $( "#test" ).scroll(function() 
        $('#mySelect').css('width', $(this).outerWidth() + $(this).scrollLeft());
    );
</script>

【讨论】：

你必须有一个 javascript hack，它需要一个 3rd 方库来添加像滚动条这样简单的东西？！ WTF？！