jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – 如何阻止chrome滚动以聚焦选择大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在开发一个控件,你有两个多选列表,其中包含可以在彼此之间移动的项目集合.

有可能一个或两个列表的内容比我想要的项目本身要宽,所以我将它们分别用两个div和一个SELEct表示如下:

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

SELEct放在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/

@L_450_24@

我有一个@L_450_24@..(免责声明:这是一种@L_450_24@而不是解决方案)

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

DEMO

大佬总结

以上是大佬教程为你收集整理的jquery – 如何阻止chrome滚动以聚焦选择全部内容,希望文章能够帮你解决jquery – 如何阻止chrome滚动以聚焦选择所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。