没有反弹 css 时，Javascript scrollTo() 不工作？

Question

我有一个用 Vue 构建的单页应用程序。我正在尝试创建一个类似 native 的 View ，在浏览页面时不会弹跳并滚动到顶部。问题是，当没有提供反弹 css(溢出、宽度/高度等)时，它不会滚动。

document.getElementById('test').scrollTo({
    top: 1000,
    left: 0
})

html {
    visibility: inherit;
    width: 100%;
    height: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    background-color: #edf2f9;
    color: #000000;
    position: fixed;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    text-rendering: optimizeLegibility;
    overflow: hidden;
    touch-action: manipulation;
    -webkit-user-drag: none;
    -ms-content-zooming: none;
    word-wrap: break-word;
    overscroll-behavior-y: none;
    margin: 0;
    padding: 0;
}

main {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    position: absolute;
    flex-direction: column;
    justify-content: space-between;
    contain: layout size style;
    overflow: hidden;
    z-index: 0;
}

section {
    padding-top: 96px;
    padding-bottom: 96px;
    overflow: scroll;
}

<main>
    <section>
        <div style="height: 5000px;" id="test">
            <p>test</p>
        </div>
    </section>
</main>

有人可以帮帮我吗？谢谢!

Answer 1

为section 元素使用ID“test”。 该部分是具有比其自身容器大的内容的元素，因此可以滚动。因此 scrollTo 可以应用于此元素。 <div> below 没有比它自己的容器大的内容，所以它不能滚动。