Question

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

我做了this pen来说明我的问题。

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

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()时，即使视图位于页面底部，视图也会向上滚动到顶部。

在笔中试一试：

全部显示
向下滚动到底部，以便在视图中看不到文档的顶部。
点击某个div进行过滤。

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

为什么会这样？

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

Answer 1

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

对于您的情况，我会删除

$(".project").hide()

仅隐藏不匹配的项目：

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

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

JavaScript setTimeout导致scrollTop事件？

1 个答案: