在 css 和 svelte 中添加滚动效果后的两个滚动条答案

【问题标题】：Two scrollbars after adding scroll affect in css and svelte在 css 和 svelte 中添加滚动效果后的两个滚动条
【发布时间】：2022-01-24 02:30:10
【问题描述】：

我正在关注这个 tut https://www.youtube.com/watch?v=htw4iKMYzEc by dev ，但我得到了两个滚动条，即使我添加了 height: 100vh; 为他修复了它。这是代码，感谢您的帮助！

<div class="container">
    <section class="one">
        <Sort />
    </section>
    <section class="two">
        <Todo />
    </section>
</div>

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    section {
        height: 100vh;
        scroll-snap-align: start;
    }

    .container {
        scroll-snap-type: y mandatory;
        overflow-y: scroll;
        height: 100vh;
    }
</style>

【问题讨论】：

标签： html css scrollbar svelte

【解决方案1】：

那是因为它溢出了默认有填充的body，要修复它，你需要先删除body padding：

<style>
    :global(body) {
        margin: 0;
        padding: 0;
    }
</style>

组件内的所有内容都是作用域的，因此您必须使用 global 来访问其他 dom 目标

【讨论】：