为什么scroll-behavior:smooth无法正常运行，但是javascript window.scroll却可以平滑运行? [英] Why is scroll-behavior:smooth not working but javascript window.scroll smooth is?

问题描述

我有一个导航栏可以向下滚动以定位元素.导航栏在体内.

I have a navigation bar to scroll down to anchor elements. The navbar is inside the body.

我的CSS:

body {
        scroll-behavior: smooth;
}

在页面中，我还使用了一些JavaScript.一种是具有以下功能的javascript，可以导航到其他页面元素:

In the page, I also use some javascript. One is a javascript with the following function to navigate to other page elements :

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

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

With Chrome, when I call the javascript function, the scroll is smooth. But when I navigate to anchors through navigation bar links, it is not smooth.

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

Would someone care to explain me why ?

在Firefox中，两者都可以从导航栏滚动； javascript功能很流畅.我认为一件作品但有些作品却有些奇怪.

Also with Firefox both scroll from navigation bar & javascript function are smooth. I think it's a bit wierd that one work but not the other.

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

EDIT : my workaround is as follow (vanilla JS / works with all modern browsers) :

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

推荐答案

基于文档，scroll-behavior: smooth在body元素上不起作用(试试吧):

Based on documentation, scroll-behavior: smooth not working on body element (try it):

HTML正文元素的scroll-behavior属性不是 传播到视口.

The scroll-behavior property of the HTML body element is not propagated to the viewport.

但是它可以在其他选择器上使用，例如html(在这里尝试).

But it works on other selectors like html (try here).

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

Also you can try pure JavaScript solution (example):

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

这篇关于为什么scroll-behavior:smooth无法正常运行，但是javascript window.scroll却可以平滑运行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！