Javascript 滚动到滚动上的某个元素（整页滚动）

我尝试在滚动或使用控制盘时滚动到某个元素。无论我的目的是做一次，而不是像这样显示在整个网站上

问题是，第一，它在页面加载时直接滚动，第二，它在滚动或我使用滚轮时不滚动

这是我拍的照片，我的代码：

componentDidMount() {
    window.addEventListener('wheel',  () => {
        document.querySelector("#services").scrollIntoView(true)
    })
    window.addEventListener('scroll',  () => {
        document.querySelector("#services").scrollIntoView(true)
    })      
}

如果我听我的逻辑，我要做的是：当检测到车轮（或滚动）滚动到此点

因此，我的问题是，为什么它不能像预期的那样工作

编辑

我发现下面的css更容易出错

html {
  scroll-behavior: smooth;
}

我尝试了一些其他的方法，但是只有在没有上面的CSS的情况下才有效，有了CSS，它就不起作用了

componentDidMount() {
    window.addEventListener('wheel', () => {
        location.hash = "#services"
    })  
}  

因此，如果未设置css，它将直接滚动到元素。但是它没有意义，我需要这个css…

我尝试了在某个点上自动向上/向下滚动，即使我们使用滚动行为也不会延迟：平滑。 基本上，我将每个div的位置设置为绝对位置，当滚动值超过某个数字时，它将根据滚动方向（即向上滚动或向下滚动）触发动画，从而使其具有自动滚动效果

最初，我只使用javascript实现相同的功能，但是window.scrollTo（）是当滚动行为平滑时，功能滞后。我检查了很多，但找不到改变平滑滚动速度的解决方案。后来意识到，在平滑滚动中，它会对每次滚动更改进行平滑转换，因此当window.scrollY从x更改时（let）到x+1，它会做一个过渡，然后从x+1到x+2，依此类推。。。导致真正的慢滚动就像在电影的结束学分（但他们也有点快）

希望这对你有用

编辑：还有一件事需要注意，屏幕分辨率是1366 x 768。自动滚动转换将在更高分辨率（1920 x 1080）下稍早触发

全屏观看

var lastScrollValue=window.pageOffsetY | | document.documentElement.scrollTop；
addEventListener（'scroll'，function（）{
var scrolled=window.scrollY；
var present_scroll_value=window.pageOffsetY | | document.documentElement.scrollTop；
如果（滚动>=625&&scrolled lastScrollValue）{
//向下滚动
document.getElementsByClassName（'scroll\u automatic\u page'）[0].style.animation=“scroll up 2s 1 forwards”；
document.getElementsByClassName（'third_page'）[0].style.animation=“moveUp 1s 1s 1 forwards”；
}否则{
//向上滚动
document.getElementsByClassName（'scroll\u automatic\u page'）[0].style.animation=“scrolldown 2s 1 forwards”；
document.getElementsByClassName（'third_page'）[0].style.animation=“moveDown 1s 1 forwards”；
}
}
lastScrollValue=当前\u滚动\u值