Question

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

有可能一个或两个列表的内容比我想要的项目本身要宽，所以我每个都有两个div和一个select表示如下：

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

将选择放在div中允许水平滚动（因为select不会）。调整大小（设置大小属性）以在添加或删除项目时适合其内容。 “concealer”div避免使用双滚动条隐藏选择中的垂直滚动条，并且当选择更改时它也是垂直大小。

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

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

我编写了脚本来将滚动窗口的scrollTop调整回当前位置，并且将工作，除了我发现在我的暂存和生产环境中，调整已完成通过chrome也会导致实际的选项选择在chrome完成自己的调整之后发生，这意味着点击注册了错误的选项（无论浏览器向上滚动多少都是关闭的），是否存在onfocus事件是一个问题。选择与否。

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

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

有谁知道我怎么可能阻止或抵消这种行为？

我确实有这样的图像，但可以理解的是，新用户无法发布图像。这是一个js小提琴，可以让你轻松重现问题：http://jsfiddle.net/4N9Kg/22/

Answer 1

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

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

<强> DEMO

如何阻止chrome滚动以聚焦选择

1 个答案: