SetTimeout和ScrollTop的奇怪行为

时间:2019-07-22 23:10:01

标签: javascript jquery

我不明白为什么我必须将scrollTop函数包装在setTimeout中。我知道在后台使用setTimeout会发生什么:将函数放在Callback队列中(从Web API提供),并在调用堆栈中的所有代码完成后执行。但是为什么在这种情况下我没有setTimeout会出现这种情况?

例如,选择spainluxembourg(按住Ctrl键并单击),停留在select选择器的底部。使用两个按钮进行测试。发生两种不同的行为。

编辑1:编辑:删除所有console.log,如果没有setTimeout仍然无法正常工作

编辑2:在第一个答案之后,我尝试了@Murali Nepalli的代码,但仍然无法正常工作。您可以确切地看到发生了什么(我在Google Chrome上)

编辑3:仅出现在Chrome,我的版本为75.0.3770.142 (Build officiel) (64 bits) (cohort: Stable)

scrollTop not working

$(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>

谢谢!

2 个答案:

答案 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 $select = $('select')
  .on('input', function() {
    console.log('try to scroll inside the select');
    current = 0;
    this.scrollTop = 0; // move to top
    startSelect();
    $select
      .find('.user-selected').removeClass('user-selected')
      .end().find(':selected').addClass('user-selected');
  })
var $options = $select.find('option');
var current = 0;

console.log('select any option');

// selects all the <option>s one by one
function startSelect() {
  setTimeout(function() {
    $options.prop("selected", false)
      .get(current).selected = true;
    // call recursively
    if ((++current) < 26) startSelect();
  }, 1000);
}
.user-selected {
  color: red;
}
<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 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>
</form>

由于他们显然使用{ behavior: "auto" }选项来调用它,因此您甚至无法确定自己的setTimeout(fn, 0)足以应对它。

但是对于您想做的事情,也许

元素的reset()方法可能适合,甚至只是<button type="reset">。这些不受此怪异行为的影响:

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>

相关问题