Question

所以我有一个简单的布局，

<a name="#A1"></a>
<div></div>
<a name="#A2"></a>
<div></div>
<a name="#A3"></a>
<div></div>

我使用下面的脚本跳转到鼠标滚动事件的下一个锚点。我已经测试了它，它可以在Firefox和IE上运行，但在Chrome浏览器上只有向下滚动，当你向上滚动时没有任何反应。

(function() {
  var delay = false;

  $(document).on('mousewheel DOMMouseScroll', function(event) {
    event.preventDefault();
    if(delay) return;

    delay = true;
    setTimeout(function(){delay = false},200)

    var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

    var a= document.getElementsByTagName('a');
    if(wd < 0) {
      for(var i = 0 ; i < a.length ; i++) {
        var t = a[i].getClientRects()[0].top;
        if(t >= 40) break;
      }
    }
    else {
      for(var i = a.length-1 ; i >= 0 ; i--) {
        var t = a[i].getClientRects()[0].top;
        if(t < -20) break;
      }
    }
    $('html,body').animate({
      scrollTop: a[i].offsetTop
    });
  });
})();

我得到的错误是Uncaught TypeError：无法读取未定义的属性“top”

Answer 1

来自the specification

如果调用它的元素没有关联的元素布局框返回一个空序列并停止此算法。

getClientRects()函数可能会返回空列表。因此，[0]索引处的元素可能不存在（未定义）。因此，您应该在访问列表中的元素之前检查列表的长度。

Answer 2

将“getElementsByTagName”更改为“getElementsByClassName” （function（）{ var delay = false;

$(document).on('mousewheel DOMMouseScroll', function(event) {
event.preventDefault();
if(delay) return;

delay = true;
setTimeout(function(){delay = false},200)

var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

var a = document.getElementsByClassName("full-height");
if(wd < 0) {
  for(var i = 0 ; i < a.length ; i++) {
    var t = a[i].getClientRects()[0].top;
    if(t >= 40) break;
  }
}
else {
  for(var i = a.length-1 ; i >= 0 ; i--) {
    var t = a[i].getClientRects()[0].top;
    if(t < -20) break;
  }
}
$('html,body').animate({
  scrollTop: a[i].offsetTop
});
});
})();

Answer 3

如果您尝试获取元素的计算top，这看起来并不正确。

var t = a[i].getClientRects()[0].top;

这应使用offsetTop。

var t = a[i].getClientRects()[0].offsetTop;

向上滚动事件以使chrome无法正常工作

3 个答案: