如何在JavaScript中使用scrollTo覆盖CSS滚动行为

我默认使用scroll smooth，但是对于一个JavaScript scrollTo（）命令，我希望覆盖CSS的“smooth”行为并使用auto，但是JS不会覆盖CSS

---

我能做什么？

您可以将容器滚动的内联样式设置为

auto

，然后通过编程方式在滚动前后更改

html.style.scrollBehavior的值来恢复更改。JS的
行为
键值对不能覆盖CSS的
滚动行为
。报告提到：

如果用户代理接受“滚动行为”属性，且以下任一项为真：

•行为为“自动”，元素不为空，其计算值为
滚动行为属性是平滑的

•行为平稳

…然后将长方体平滑滚动到位置。否则，执行方框到位置的即时滚动

您的用户代理尊重
滚动行为
属性；这意味着我们要检查两个条件中的一个。当您使用
window.scroll（{…，behavior:'auto'}）
时，我们将进入第一个条件。我们正在设置的
行为
确实是
自动
，元素确实不是
空
，并且
滚动行为
属性的计算值确实是
平滑
。因此，将出现一个平滑的滚动。要使条件为false，我们可以使用内联样式将
滚动行为
属性的计算值重写为
自动

这里有一个简单的例子。通过单击
向下滚动200
按钮，以编程方式滚动，而不会出现平滑行为。通过单击链接平滑滚动


函数scrollNoSmooth（）{
//将滚动行为的内联样式临时设置为“自动”
html.style.scrollBehavior='auto'
//此“行为”无法覆盖CSS“滚动行为”
//卷轴
滚动窗口({
顶部：window.scrollY+200，
左:0,，
//行为：“平滑”
})
//将内联样式恢复为空
html.style.scrollBehavior=''
}
const html=document.querySelector（'html'）
const fixed=document.querySelector（“.fixed”）
已修复。addEventListener（'click'，scrollNoSmooth）

html{
滚动行为：平滑；
位置：相对位置；
}
a{
显示：块；
高度：400px；
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.固定{
显示器：flex；
证明内容：中心；
对齐项目：居中；
位置：固定；
宽度：150px；
高度：50px；
边界半径：5px；
背景：#121212；
颜色：白色；
光标：指针；
}

向下滚动200

如果您只需要支持chrome和/或firefox，您可以使用未记录的“behavior:instant”值覆盖css设置的滚动行为，详细信息请参见。 例如：

document.querySelector（'button'）。addEventListener（'click'，（）=>{
const container=document.querySelector（“.container”）
container.scrollTo({
顶部：container.scrollTop+100，
行为：“即时”
})
})

.container{
高度：100px；
溢出：自动；
滚动行为：平滑；
}
.盒子{
宽度：100px；
高度：50px；
背景：#AAD；
边缘底部：10px；
}

纸卷

滚动平滑css是否有

！重要信息

added？@Sachi.Dila它没有。天才！你摇滚：）