滚动子页面时，BrowserProvided AutoComplete Dropdown 卡住（浮动）答案

【问题标题】：BrowserProvided AutoComplete Dropdown is sticking(floating) when scrolling the subpage滚动子页面时，BrowserProvided AutoComplete Dropdown 卡住（浮动）
【发布时间】：2014-06-29 11:33:51
【问题描述】：

我有一个网页，其中顶部标题像许多网页一样固定，而其他正文内容有时可能有滚动条。我已打开浏览器的自动完成功能。我有一些文本框来接受用户输入。单击文本框时，它会打开自动完成下拉菜单，其中包含用户先前输入的值。现在，如果我滚动页面文本框正在移动，但自动完成下拉菜单没有。问题在于 IE 和 Chrome。

以下是示例代码（插入更多空白行以在浏览器上创建滚动条）：

<html>
    <head>
        <style type="text/css">
                 body,div {
                                   margin: 0;
                                   padding: 0;
                                   }
            body {
                /* Disable scrollbars and ensure that the body fills the window */
                width: 100%;
                height: 100%;
            }

        #main {
                /* Provide scrollbars if needed, position below header, and derive     height from top/bottom */
                overflow: auto;
                position: absolute;
                width: 100%;
                top: 200px;
                bottom: 0;
            }
        </style>
    </head>

    <body>

    <div style='position:absolute;top:0px:left:0px;'>
        <span> This is fixed content2</span>

    </div>
    <div id="main">
        <pre>
            <form id="myform" action="http://www.google.com">
            <a href="www.google.com">Google</a>
            <input type="submit"/>

            <input type="text" name="t" id="t"/>







        <select name="sel"> 
            <option>12</option>
            <option>13</option>
            <option>22</option>
            <option>45</option>
        </select>














            </form>
            </pre>
            </div>
    </body>
</html>

【问题讨论】：

标签： html css autocomplete scroll floating

【解决方案1】：

这是浏览器的默认行为。为了克服这个问题，您需要使用 javascript 或 jquery 创建自定义自动建议并将其附加到该文本框，以便它始终坚持该文本框。

【讨论】：

但是应该有一些解决方法，我不知道我的客户是否会使用自动完成功能。我不能限制它们。
是的，有一个解决方法。如果用户滚动，那么您可以使用 jquery 或 javascript 从文本框中移除焦点。