6

我正在开发一种控件，您可以在其中拥有两个多选列表，其中包含可以在彼此之间移动的项目集合。

一个或两个列表的内容有可能比我希望的项目本身更宽，因此我将它们分别由两个 div 和一个 select 表示，如下所示：

<div class="container">
    <div class="concealer">
        <select size="4">
            ...
        </select>
    </div>
</div>

将 select 放在 div 中允许水平滚动（因为 select 不允许）。当添加或删除项目时，将调整选择的大小（设置 size 属性）以适应其内容。“遮瑕膏”DIV避免双滚动条在选择上隐藏垂直滚动条，并且在选择变化时垂直尺寸。

我正在使用html5。标准模式下的 IE9 和 Firefox 都可以。我遇到的问题是Chrome（实际上也是Safari，所以...... webkit）。如果控件位于具有垂直滚动的窗口或容器（例如 div）中，并且您将其滚动到看不到选择顶部的点，如果选择的底部可见（或将在外部容器中可见，如果可以看到溢出），当您单击选择中的一个项目，导致选择聚焦时，Chrome 将外部容器滚动到其顶部或足够远，以便选择的顶部是如果您可以通过包含它的 div 看到它，则可见。

如前所述，如果选择中最底部的选项在（包含）窗口中可见，但选择的顶部不可见，则 chrome 将滚动。

我已经编写了脚本来将滚动窗口的 scrollTop 调整回其当前位置，这会起作用，除了我发现在我的登台和生产环境中，chrome 所做的调整也会导致实际的选项选择发生在 chrome 进行了自己的调整之后，这意味着点击注册了错误的选项（无论浏览器向上滚动多少都会关闭），选择是否有 onfocus 事件是个问题。

在这样的准系统测试中，我无法让选项选择问题发生，但滚动本身就是一个问题。

我发现防止这种情况发生的唯一方法是将选择的大小调整为足够大的数字，以便将选择井的底部放在外部容器的底部之外，但这根本不理想，因为它离开了大量的空白，是一种糟糕的用户体验，并且解决了一个（虽然相当深刻）只影响 webkit 的问题。

有谁知道我还能如何防止或抵消这种行为？

我确实有与此相关的图像，但可以理解的是，新用户无法发布图像。这是一个 js fiddle，应该可以让您轻松重现该问题：http: //jsfiddle.net/4N9Kg/22/

4

1 回答 1

3

我有一个解决方法..（免责声明：这是一种解决方法而不是解决方案）

$('#sel').mousedown(function(e){
    $(e.target).attr('selected', 'selected'); //select the clicked <option> item
    e.preventDefault();
});

演示

于 2012-08-24T11:41:27.060 回答