Javascript scroll至不使用scroll snap和100vh容器

当我有一个包含多个

.section

元素的

.section

容器，并设置滚动捕捉时，它只有在给该节一个固定的100vh高度时才能工作。如果没有高度，滚动捕捉将无法工作。这很好，除非没有固定的高度，

scrollTo

可以正常工作，并且当我将高度添加到部分时，

scrollTo

不再工作

这里有一个例子。您可以注释掉

高度：100vh.section

中的code>行中，单击任意位置将向下滚动到第#3节，但当高度打开时，它不会滚动

我尝试了

console.log

它滚动到的位置，并且它是正确的，但是滚动从未真正发生过。你知道为什么这不是我想要的吗

注意：我在最新的Chrome中看到了这种行为。我还没有测试其他浏览器

//单击文档滚动到第3节
document.body.onclick=函数（）{
log（'SCROLLING…'）；
const el=document.getElementById（'s3'）；
const pos=el.getBoundingClientRect（）；
窗口滚动至（0，位置顶部）；
}

*{
框大小：边框框；
}
html，
身体{
保证金：0；
填充：0；
}
.部分{
溢出y：滚动；
滚动捕捉类型：y必填；
/**
*添加下面的换行符滚动到，删除
*它打破了滚动快照。。。。
*/
高度：100vh；
}
.科{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
最小高度：100vh；
溢出：隐藏；
位置：相对位置；
边框：5px纯色深粉色；
字体大小：30px；
字体大小：粗体；
滚动捕捉对齐：居中；
}

第一节
第二节
第三节
第四节
第五节

感谢@Temani Afif的评论。他们正确地指出，我不能使用body滚动，我需要使用

.sections

容器滚动

下面是一个工作示例：

//单击文档滚动到第3节
document.body.onclick=函数（）{
log（'SCROLLING…'）；
const el=document.getElementById（'s3'）；
const pos=el.getBoundingClientRect（）；
const sections=document.querySelector（'.sections'）；
部分。滚动至（0，位置顶部）；
}

*{
框大小：边框框；
}
html，
身体{
保证金：0；
填充：0；
}
.部分{
溢出y：滚动；
滚动捕捉类型：y必填；
高度：100vh；
}
.科{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
最小高度：100vh；
溢出：隐藏；
位置：相对位置；
边框：5px纯色深粉色；
字体大小：30px；
字体大小：粗体；
滚动捕捉对齐：居中；
}

第一节
第二节
第三节
第四节
第五节

在制作高度时，您需要在

.sections

内部滚动，而不是在窗口（

document.querySelector（'.sections'）。滚动到（0，pos.top）；

我想应该这样做）我不敢相信这么容易，谢谢！