Question

以下是我正在处理的代码片段：

 var $container = $('#myNumRows');  
$container.scroll(function () {
   if ($container.scrollTop() == 0) {
    addRows('Top'); 
   } else if ($container.innerHeight() + $container.scrollTop() >= $container[0].scrollHeight ) {
     addRows('Bottom');
   }

addRows是一个带有参数的函数，可以注明“Top”或“Bottom”。

在IE兼容模式下，当滚动到底部时，它会将行添加两次。如果不是在兼容模式下不会发生，并且不会在任何其他浏览器（chrome，firefox）中发生。我曾尝试在各个地方使用超时，我尝试使用underscore.js的去抖动进行多次迭代，但无论我做什么，当它到达滚动的底部时，它会在IE兼容模式下触发两次。

有人能告诉我为什么会这样吗？

Answer 1

这看起来像IE-Compatibility-Mode-Bug。从我的角度来看，最好的解决方案是添加一个变量，这需要另外一个向上滚动，然后再添加更多行，如下所示：

var $container = $('#myNumRows'), bottom = false, top = false;  
$container.scroll(function () {
if ($container.scrollTop() == 0) {
  if (!top) {
    top = true;
    addRows('Top'); 
  } else {
    top = false;
  }
} else if ($container.innerHeight() + $container.scrollTop() >= $container[0].scrollHeight) {
  if (!bottom) {
    bottom = true;
    addRows('Bottom');
  } else {
    bottom = false;
  }
}

Answer 2

在无限滚动场景中动态创建数据之前，我在IE中遇到过类似的问题。原因（我遇到的类似问题）是添加附加数据导致出现水平或垂直滚动条，这反过来会影响容器高度和/或宽度并触发滚动事件。 / p>

如果去抖不起作用，那么我认为事件的顺序可能是：

第一次触发
发生Ajax调用
附加新DOM，影响布局。这会再次触发布局条件，再次触发。

如果是这种情况，那么解决方案就是关闭处理，直到你完成对DOM的操作，即

第一次触发。如果(busy == false)设置busy = true;
发生Ajax调用
追加新DOM。添加对setTimeout(function() {busy = false;}, 1)的通话。布局再次触发，但busy == true没有任何反应
计时器触发器，设置busy = false

在IE兼容模式下，ajax调用会触发两次

2 个答案: