JavaScript setTimeout 导致 scrollTop 事件？

Question

我在一个文档中有一组 div，可以按类名过滤，就像隐藏和显示元素一样。 可以通过单击列表中的相应元素或顶部菜单中的项目之一来过滤列表。

我做了这支笔来说明我的问题。

我为每个点击事件调用过滤器函数，它隐藏所有元素，并在使用window.setTimeout()显示正确的，如下所示。 这是为了获得延迟以及触发淡入 css3 动画。

var filter = function(el){

  if(filterClass==='all'){
    window.setTimeout(function(){
      $('.project').show(); //show all projects
      $('#filter-all').addClass('active');
    }, 100);
  }
  else{
    window.setTimeout(function(){
      $('.'+filterClass).show(); //show filtered projects
      $('#back2').show();
      $('#'+elClassName).addClass('active');
    }, 100);
  }  
};

问题是，当我使用window.setTimeout() ，视图会向上滚动到顶部，即使视图位于页面底部。

用笔试试这个：

1. 显示所有
2. 向下滚动到底部，以便文档的顶部在视图中不可见。
3. 通过单击某个 div 进行过滤。

结果：它被正确过滤，但视图总是滚动/跳到顶部。

为什么会这样？

我希望它尽可能保持在相同的相对滚动视图中，否则最终会出现在滚动条的底部。 这对我来说是标准和期望的行为。

Answer 1

页面滚动顶部，因为您隐藏了元素。 所以没有更多的向下滚动区域。 如果您有 1000 个项目并且您过滤了 999 个并且只显示了 1 个，那么您会期望什么？ 可滚动区域太短了。

对于你的情况，我会删除

$(".project").hide()

并仅隐藏不匹配的项目：

else{
    window.setTimeout(function(){
      $('.'+filterClass).show();
      $(".project:not(" + '.' + filterClass + ')').hide();
      $('#back2').show();
      $('#'+elClassName).addClass('active');
    }, 100);
  } 

不是一个完美的解决方案，因为会有一些滚动顶部。 但在大多数情况下，它会更少。