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

JavaScript只能在浏览器中平滑滚动

1 个答案: