Question

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

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

如果滚动位置较大，则select2元素的顶部偏移然后选择2将重新定位滚动，以便select2元素保持可见。我怎么能绕过这个？

更新：

我创建了小提琴，显示了这个问题http://jsfiddle.net/83acq8hp/2/。此问题仅存在于Firefox中。在Safari和Chrome中它可以正常工作，但在Firefox中，因为小提示不显示。

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，您可以在没有调试噪音的情况下查看this working jsfiddle。

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

1 个答案: