我有一个导航栏可以向下滚动到锚元素。导航栏在身体内部。
我的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 许可协议
根据 文档,
scroll-behavior: smooth
不适用于body
元素( 尝试一下):但它适用于其他选择器,如
html
( 在此处尝试)。您也可以尝试纯 JavaScript 解决方案( 示例):