Question

我已经设置了一个简单的函数，可以在从文档顶部滚动一定数量的像素时向标头添加一个类，它可以在所有地方使用，但不能在Edge中使用。知道为什么吗？

控制台中没有错误，什么也没有，只是不起作用。

const headerScrollClass = () => {
  window.addEventListener('scroll', throttle(callback, 100));
}

function throttle(fn, wait) {
  let time = Date.now();
  return function () {
    if ((time + wait - Date.now()) < 0) {
      fn();
      time = Date.now();
    }
  }
}

const callback = () => {
  if (document.documentElement.scrollTop > 100) {
    document.querySelector('.header').classList.add('header--top');
  } else {
    document.querySelector('.header').classList.remove('header--top');
  }
}

Answer 1

正如Huangism所说，document.documentElement.scrollTop似乎不受Microsoft Edge支持。您可以在w3schools中尝试the example。您会发现，如果仅使用document.documentElement，它将无法在Edge中使用。因此，我认为您应该在Edge中使用document.body.scrollTop。

参考：https://www.w3schools.com/jsref/prop_element_scrolltop.asp

您可以尝试以下代码以使其在不同的浏览器中兼容：

var scrollTop = window.pageYOffset 
            || document.documentElement.scrollTop  
            || document.body.scrollTop  
            || 0;

窗口滚动事件在Microsoft Edge中不起作用

1 个答案: