为什么 scroll-behavior:smooth 不起作用但 javascript window.scroll smooth 是？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49636727/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is scroll-behavior:smooth not working but javascript window.scroll smooth is?
提问by Ado Ren
I have a navigation bar to scroll down to anchor elements. The navbar is inside the body.
我有一个导航栏可以向下滚动到锚元素。导航栏位于主体内部。
My css :
我的CSS：
body {
scroll-behavior: smooth;
}
In the page, I also use some javascript. One is a javascript with the following function to navigate to other page elements :
在页面中，我还使用了一些 javascript。一个是具有以下功能的 javascript，用于导航到其他页面元素：
window.scroll({
top : pos,
left : 0,
behavior : 'smooth'
});
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.
使用 Chrome，当我调用 javascript 函数时，滚动是平滑的。但是当我通过导航栏链接导航到锚点时，它并不流畅。
Would someone care to explain me why ?
有人愿意解释我为什么吗？
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.
同样使用 Firefox，导航栏和 javascript 功能的滚动都很流畅。我认为一个工作而不是另一个工作有点奇怪。
EDIT : my workaround is as follow (vanilla JS / works with all modern browsers) :
编辑：我的解决方法如下（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
}
And the fallback scroll function :
和后备滚动功能：
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
};
采纳答案by Saeed Hassanvand
Based on documentation, scroll-behavior: smoothnot working on bodyelement (try it):
基于文档，scroll-behavior: smooth不在body元素上工作（试试看）：
The scroll-behavior property of the HTML body element is not propagated to the viewport.
HTML body 元素的滚动行为属性不会传播到视口。
But it works on other selectors like html(try here).
但它适用于其他选择器，如html（试试这里）。
Also you can try pure JavaScript solution (example):
您也可以尝试纯 JavaScript 解决方案（示例）：
function scrollToTop() {
window.scrollTo({
top: 1000,
behavior: 'smooth'
});
}
回答by Tara Stahler
I don't know if you still need an answer to this, but I came across an article that fixed it for me with just css: https://www.fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property/
我不知道你是否仍然需要这个答案，但我看到一篇文章，只用 css 为我修复了它：https: //www.fourkitchens.com/blog/article/fix-scrolling-performance-css -将改变财产/
回答by newpxsn
Maybe you want to try to smooth scroll using jQuery. I think native scrolling might not always support the smooth scroll. You'd be much safer using jQuery.
也许您想尝试使用 jQuery 平滑滚动。我认为本机滚动可能并不总是支持平滑滚动。使用 jQuery 会更安全。
$("html, body").animate({ scrollTop: 0 }, "slow");
If you are using other anchors, you need to make sure they prevent default jumping and scroll. I'd use jQuery also.
如果您使用其他锚点，则需要确保它们防止默认跳转和滚动。我也会使用 jQuery。
Ref: https://css-tricks.com/snippets/jquery/smooth-scrolling/
参考：https: //css-tricks.com/snippets/jquery/smooth-scrolling/
