ScrollTo 不适用于滚动快照和 100vh 容器答案

【问题标题】：ScrollTo not working with scroll-snap and 100vh containerScrollTo 不适用于滚动快照和 100vh 容器
【发布时间】：2020-01-29 13:58:30
【问题描述】：

当我有一个带有多个 .section 元素的 .sections 容器并设置滚动捕捉时，如果我将部分的固定高度设置为 100vh，它将仅工作。没有高度，滚动捕捉将不起作用。这很好，除非没有固定高度，scrollTo 可以正常工作，当我将高度添加到该部分时，scrollTo 不再工作。

这是一个例子。您可以注释掉.section CSS 中的height: 100vh; 行，并看到单击任意位置会向下滚动到第3 部分，但打开高度后，它不会滚动。

我已经尝试console.log 它滚动到的位置并且它是正确的，但滚动从未真正发生过。关于为什么这不是我想要的方式的任何想法？

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

// Click on document to scroll to section 3
document.body.onclick = function() {
    console.log('SCROLLING...');
    const el = document.getElementById('s3');
    const pos = el.getBoundingClientRect();
    window.scrollTo(0, pos.top); 
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}
.sections {
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    /**
     * Adding the below line breaks scrollto, removing 
     * it breaks scroll-snap....
     */
    height: 100vh; 
}
.section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    border: 5px solid deeppink;
    font-size: 30px;
    font-weight: bold;

    scroll-snap-align: center;
}

<html>
    <body>
        <div class="sections">
            <div class="section" id="s1">SECTION 1</div>
            <div class="section" id="s2">SECTION 2</div>
            <div class="section" id="s3">SECTION 3</div>
            <div class="section" id="s4">SECTION 4</div>
            <div class="section" id="s5">SECTION 5</div>
        </div>
    </body>
</html>

【问题讨论】：

你需要在 .sections 里面滚动当高度：100vh 而不是窗口时（document.querySelector('.sections').scrollTo(0, pos.top); 我猜应该这样做）
我不敢相信这么简单，谢谢！

标签： javascript html css scroll-snap js-scrollto

【解决方案1】：

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

现在是一个工作示例：

// Click on document to scroll to section 3
document.body.onclick = function() {
    console.log('SCROLLING...');
    const el = document.getElementById('s3');
    const pos = el.getBoundingClientRect();
    const sections = document.querySelector('.sections');
    sections.scrollTo(0, pos.top); 
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}
.sections {
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    height: 100vh; 
}
.section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    border: 5px solid deeppink;
    font-size: 30px;
    font-weight: bold;

    scroll-snap-align: center;
}

<html>
    <body>
        <div class="sections">
            <div class="section" id="s1">SECTION 1</div>
            <div class="section" id="s2">SECTION 2</div>
            <div class="section" id="s3">SECTION 3</div>
            <div class="section" id="s4">SECTION 4</div>
            <div class="section" id="s5">SECTION 5</div>
        </div>
    </body>
</html>

【讨论】：