为什么 scroll-behavior:smooth 不起作用但 javascript window.scroll smooth 是?

新手上路,请多包涵

我有一个导航栏可以向下滚动到锚元素。导航栏在身体内部。

我的CSS:

 body {
        scroll-behavior: smooth;
}

在页面中,我还使用了一些javascript。一个是具有以下功能的 javascript,用于导航到其他页面元素:

 window.scroll({
    top : pos,
    left : 0,
    behavior : 'smooth'
});

使用 Chrome,当我调用 javascript 函数时,滚动很流畅。但是当我通过导航栏链接导航到锚点时,它并不流畅。

有人愿意向我解释为什么吗?

此外,对于 Firefox,导航栏和 javascript 功能的滚动都很流畅。我认为一个有效但另一个无效有点奇怪。

编辑:我的解决方法如下(vanilla JS/适用于所有现代浏览器):

     let pos = document.querySelector(element).offsetTop;
    if ('scrollBehavior' in document.documentElement.style) { //Checks if browser supports scroll function
        window.scroll({
            top : pos,
            left : 0,
            behavior : 'smooth'
        });
    } else {
        smoothScrollTo(0, pos, 500); //polyfill below
    }

和后备滚动功能:

 window.smoothScrollTo = function(endX, endY, duration) {
        let startX = window.scrollX || window.pageXOffset,
        startY = window.scrollY || window.pageYOffset,
        distanceX = endX - startX,
        distanceY = endY - startY,
        startTime = new Date().getTime();

        // Easing function
        let easeInOutQuart = function(time, from, distance, duration) {
            if ((time /= duration / 2) < 1) return distance / 2 * time * time * time * time + from;
            return -distance / 2 * ((time -= 2) * time * time * time - 2) + from;
        };

        let timer = window.setInterval(function() {
            let time = new Date().getTime() - startTime,
            newX = easeInOutQuart(time, startX, distanceX, duration),
            newY = easeInOutQuart(time, startY, distanceY, duration);
            if (time >= duration) {
                window.clearInterval(timer);
            }
            window.scrollTo(newX, newY);
        }, 1000 / 60); // 60 fps
    };

原文由 Ado Ren 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 3.7k
2 个回答

根据 文档scroll-behavior: smooth 不适用于 body 元素( 尝试一下):

HTML body 元素的滚动行为属性不会传播到视口。

但它适用于其他选择器,如 html在此处尝试)。

您也可以尝试纯 JavaScript 解决方案( 示例):

 function scrollToTop() {
  window.scrollTo({
    top: 1000,
    behavior: 'smooth'
  });
}

原文由 Saeed Hassanvand 发布,翻译遵循 CC BY-SA 4.0 许可协议

这对我有用:

 * {
  scroll-behavior: smooth;
}

原文由 Normajean 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏