组合框或列表框中带有上下箭头键按键功能的水平滚动条

• 下载演示项目 - 8.6 KB
• 下载源代码文件 - 1.9 KB

引言

本文介绍了

• 如何在选择框 (HTML) 或列表框 (ASP.NET) 中显示水平滚动条
• 按下上下箭头键时，功能也应按预期工作

问题

Internet Explorer (IE) 在渲染某些 HTML 控件时存在一些限制。其中一个控件是 combobox (HTML) 或 ListBox (ASP.NET)。

同样，在 Internet Explorer 中呈现 combobox 或 listbox 时，存在一些限制

• 在 combobox 中，如果指定了 width 且内容的 length 大于指定的 width，则不会出现水平滚动条。
• 指定 title 属性不会显示工具提示。

我浏览了许多关于在 combobox 或 listbox 中放置水平滚动条的文章，但没有一篇看起来不错。

最后，我找到了一些文章，解释了如何为 combobox 或 listbox 放置自定义水平滚动条。但同样，自定义滚动条也有一些限制，上下箭头键无法按预期工作。 我们可以使用 DIV 标签通过指定 height 和 width 来实现 combobox 中的水平滚动条。 现在，考虑一个场景，其中 combobox 中的项目数量大于指定的 DIV 元素的高度。 现在，如果我们按下向下/向上箭头键，它将无法按预期工作，即我们看不到所选项目。

解决方案

我们需要解决一些问题才能解决 combobox 中的水平滚动条问题。

• 众所周知，Internet Explorer 不支持 combobox 中的水平滚动条，所以我们必须使用自定义水平滚动条。 从外观和用户角度来看，水平滚动条将显示为 combobox 的一部分。
• 现在我们在 combobox 上添加了一个 DIV 标签。 为了克服上下箭头键问题，我们需要应用一些技巧，使其行为符合预期。

Using the Code

<div id='divCollegeNames' 
  style="OVERFLOW: auto;WIDTH: 304px;HEIGHT: 147px" 
  onscroll="OnDivScroll();" >

<SELECT id='lstCollegeNames' size="8" 
  multiple onfocus="OnSelectFocus();" >

在脚本级别我们需要注意几件事

//On scrolling of DIV tag.
function OnDivScroll()
{
    var lstCollegeNames = document.getElementById("lstCollegeNames");

    //The following two points achieve two things while scrolling
    //a) On horizontal scrolling: To avoid vertical
    //   scroll bar in select box when the size of 
    //   the selectbox is 8 and the count of items
    //   in selectbox is greater than 8.
    //b) On vertical scrolling: To view all the items in selectbox

    //Check if items in selectbox is greater than 8, 
    //if so then making the size of the selectbox to count of
    //items in selectbox,so that vertical scrollbar
    // won't appear in selectbox
    if (lstCollegeNames.options.length > 8)
    {
        lstCollegeNames.size=lstCollegeNames.options.length;
    }
    else
    {
        lstCollegeNames.size=8;
    }
}

//On focus of Selectbox
function OnSelectFocus()
{
    //On focus of Selectbox, making scroll position 
    //of DIV to very left, i.e., 0 if it is not. The reason behind
    //is, in this scenario we are fixing the size of Selectbox 
    //to 8 and if the size of items in Selectbox is greater than 8 
    //and to implement downarrow key and uparrow key 
    //functionality, the vertical scrollbar in selectbox will
    //be visible if the horizontal scrollbar of DIV is extremely right.
    if (document.getElementById("divCollegeNames").scrollLeft != 0)
    {
        document.getElementById("divCollegeNames").scrollLeft = 0;
    }

    var lstCollegeNames = document.getElementById('lstCollegeNames');
    //Checks if count of items in Selectbox is greater 
    //than 8, if yes then making the size of the selectbox to 8.
    //So that on pressing of downarrow key or uparrowkey, 
    //the selected item should also scroll up or down as expected.
    if( lstCollegeNames.options.length > 8)
    {
        lstCollegeNames.focus();
        lstCollegeNames.size=8;
    }
}

就是这样！

关注点

不可能只是赛道上的另一个障碍。

历史

• 2006 年 1 月 29 日：文章的初始版本