我不明白为什么我必须将scrollTop
函数包装在setTimeout
中。我知道在后台使用setTimeout会发生什么:将函数放在Callback队列中(从Web API提供),并在调用堆栈中的所有代码完成后执行。但是为什么在这种情况下我没有setTimeout
会出现这种情况?
例如,选择spain
和luxembourg
(按住Ctrl键并单击),停留在select
选择器的底部。使用两个按钮进行测试。发生两种不同的行为。
编辑1:编辑:删除所有console.log
,如果没有setTimeout
仍然无法正常工作
编辑2:在第一个答案之后,我尝试了@Murali Nepalli的代码,但仍然无法正常工作。您可以确切地看到发生了什么(我在Google Chrome上)
编辑3:仅出现在Chrome,我的版本为75.0.3770.142 (Build officiel) (64 bits) (cohort: Stable)
$(function() {
$('form').on('resetwithtimeout', function(e) {
var $select = $(e.currentTarget).find('select');
$select.find('option')
.filter(':selected').prop("selected", false).end()
.filter(':first').prop("selected", true);
setTimeout(function() {
$select.scrollTop(0);
}, 0);
});
$('form').on('resetwithouttimeout', function(e) {
var $select = $(e.currentTarget).find('select');
$select.find('option')
.filter(':selected').prop("selected", false).end()
.filter(':first').prop("selected", true);
$select.scrollTop(0);
});
$('#button1').on('click', function(e) {
$('form').trigger('resetwithtimeout');
})
$('#button2').on('click', function(e) {
$('form').trigger('resetwithouttimeout');
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form>
<select name="country" id="country-select" multiple size="5">
<option selected value="austria">Austria</option>
<option value="belgium">Belgium</option>
<option value="bulgaria">Bulgaria</option>
<option value="croatia">Croatia</option>
<option value="republic">Republic of Cyprus</option>
<option value="czech">Czech Republic</option>
<option value="denmark">Denmark</option>
<option value="estonia">Estonia</option>
<option value="finland">Finland</option>
<option value="france">France</option>
<option value="germany">Germany</option>
<option value="greece">Greece</option>
<option value="hungary">Hungary</option>
<option value="ireland">Ireland</option>
<option value="italy">Italy</option>
<option value="latvia">Latvia</option>
<option value="lithuania">Lithuania</option>
<option value="luxembourg">Luxembourg</option>
<option value="malta">Malta</option>
<option value="netherlands">Netherlands</option>
<option value="poland">Poland</option>
<option value="portugal">Portugal</option>
<option value="romania">Romania</option>
<option value="slovakia">Slovakia</option>
<option value="slovenia">Slovenia</option>
<option value="spain">Spain</option>
<option value="sweden">Sweden and the UK</option>
</select>
<button id="button1" type="button">Reset form with scroll inside setTimeout</button>
<button id="button2" type="button">Reset form with scroll not inside a setTimeout</button>
</form>
</body>
谢谢!
答案 0 :(得分:1)
您可以只更改“选择”元素的选择索引。这会将滚动位置重置为顶部。 https://jsfiddle.net/hbL8tzma/
$('form').on('resetwithouttimeout', function(e) {
var $select = $(e.currentTarget).find('select');
$select[0].selectedIndex = 0;
});
答案 1 :(得分:0)
那是一个Chrome错误。
无论出于何种原因,每次我们以编程方式更改
var $form = $('form');
var $select = $form.find('select');
$form.on('reset', function() {
$select.scrollTop(0);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<select name="country" id="country-select" multiple size="5">
<option selected value="austria">Austria</option>
<option value="belgium">Belgium</option>
<option value="bulgaria">Bulgaria</option>
<option value="croatia">Croatia</option>
<option value="republic">Republic of Cyprus</option>
<option value="czech">Czech Republic</option>
<option value="denmark">Denmark</option>
<option value="estonia">Estonia</option>
<option value="finland">Finland</option>
<option value="france">France</option>
<option value="germany">Germany</option>
<option value="greece">Greece</option>
<option value="hungary">Hungary</option>
<option value="ireland">Ireland</option>
<option value="italy">Italy</option>
<option value="latvia">Latvia</option>
<option value="lithuania">Lithuania</option>
<option value="luxembourg">Luxembourg</option>
<option value="malta">Malta</option>
<option value="netherlands">Netherlands</option>
<option value="poland">Poland</option>
<option value="portugal">Portugal</option>
<option value="romania">Romania</option>
<option value="slovakia">Slovakia</option>
<option value="slovenia">Slovenia</option>
<option value="spain">Spain</option>
<option value="sweden">Sweden and the UK</option>
</select>
<button type="reset">Reset form</button>
</form>