Select2 onChange 事件取消了我在 Firefox 中的 scrollTop 命令

Question

我广泛使用 Select2。我正在尝试运行 $('html,body').scrollTop() 在 Select2 .on('change') 事件中运行，但它无法正常工作。我的代码：

$('.category_select').on('change', function(e){
    var scroll_pos = $('#category_'+$(this).select2('val')).offset().top;
    $('html,body').scrollTop(scroll_pos);
});

如果滚动位置大于 select2 元素的顶部偏移量，则 select2 将重新定位滚动，以便 select2 元素保持可见。我该如何解决这个问题？

更新：

我创建了 fiddle 来显示这个问题 http://jsfiddle.net/83acq8hp/2/。此问题仅存在于 Firefox 中。在 Safari 和 Chrome 中正常工作，但在 Firefox 中 fiddle 显示不正常。

Answer 1

您在 Firefox 中发现 "bug" 不错。

如果您更改选项的时间足够长，您会看到滚动条向下移动到正确的选项，然后再次向上移动到 select2（这真的很快，所以您需要查看滚动条才能看到它).

这让我想到滚动部分可以工作，但某些东西迫使显示 select2 输入。所以，我的赌注是 focus.

This jsfiddle 展示了我的调试过程，这是你应该用来解决它的代码：

$('#mySelect').select2();

$('#mySelect').on("change", function(e) { 
    var element = '#test'+$(this).select2('val');
    var scroll_pos = $(element).offset().top;

    $('html,body').scrollTop(scroll_pos);
})
.on("select2-close", function () {
    setTimeout(function() {
        $('.select2-container-active').removeClass('select2-container-active');
        $(':focus').blur();
    }, 1);
});

基本上，您需要使用事件 select2-close 从 select2 输入中移除焦点。否则，Firefox 将显示具有焦点的元素。

我用于 select2-close 的代码属于 this answer and you can check this working jsfiddle，没有调试噪声。

Select2 onChange 事件取消了我在 Firefox 中的 scrollTop 命令

Select2 onChange event cancels my scrollTop command in Firefox

jquery

scroll

jquery-select2