向上滚动事件，因为铬不起作用

Scroll up event for chrome not working

本文关键字：因为 不起作用 事件 滚动      更新时间：2023-09-26

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

<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
    });
  });
})();

im 得到的错误是未捕获的类型错误：无法读取未定义的属性"top"

来自规范

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

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

将"getElementsByTagName"更改为"getElementsByClassName" （函数（） { VaR 延迟 = 假;

$(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
});
});
})();

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

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

这应该使用offsetTop .

var t = a[i].getClientRects()[0].offsetTop;
相关文章：