JavaScript 仅能在浏览器之间平滑滚动

Question

我有一个平滑滚动功能，在 Chrome 和 Safari 中运行良好，但在 Firefox 中无法运行，因为它正在调用 document.body.scrollTop。

function smoothScroll(body, destination, duration) {
  duration = (typeof duration != "undefined") 
    ?  duration 
    : 500;
  if (duration <= 0) return;
  var difference = destination - body.scrollTop;
  var perTick = difference / duration * 10;
  setTimeout(function() {
    body.scrollTop = body.scrollTop + perTick;
    if (body.scrollTop === destination) {
      showAndHideNav("hide");
      return;
    }
    smoothScroll(body, destination, duration - 10);
  }, 10);
}

function findDestination(element) {
  var value = element.getAttribute("value"),
    destination = document.getElementById(value).offsetTop;
  return destination;
}

smoothScroll(document.body, findDestination(element));

我尝试将 scrollTop 替换为 pageYOffset，它标识正确的位置，但不会滚动到这些位置。

谁能推荐一个对浏览器更友好的 scrollTop 替代方案，以实现跨浏览器的平滑滚动？

感谢您的帮助!

Answer 1

不要直接使用 body.scrollTop，而是尝试使用以下辅助函数，如下所示:getScrollTop(window)

function getScrollTop(scrollable) {
    return scrollable.scrollTop || document.body.scrollTop || document.documentElement.scrollTop;
}

要实际滚动到目标，请尝试以下跨浏览器方法:

window.scrollTo(0, getScrollTop(window) + perTick);