css - Safari 上的 snap 滚动容器内的线性滚动

Question

预期行为：
一个容器在 div 上有 snap 滚动，
1 到 4 个 div 是 snap，
第 5 个是一个容器，里面有线性滚动，
你也可以向上滚动。

我的问题：
在使用触摸板的 macOS（Catalina 10.15.5）上的 safari（13.1.1）上，一旦到达线性滚动容器，您就不能再使用触摸板向上滚动，您将锁定到线性滚动容器并且不能再在身体的其余部分滚动了。

当使用带有滚轮的鼠标时，它可以在 macOS 和 Safari 上正常工作。
使用 Chrome 或 Firefox 上的触摸板，或在所有浏览器上使用 Windows 和 Linux 并使用触摸板和滚轮，也可以在 macOS 上按预期工作。

演示： https ://codepen.io/0swin/pen/eYZWwWy

<template>
    <div id="app">
        <div class="snap-container">
            <div v-for="i in 4" class="slide snap">
                {{ i }}
            </div>
            <div class="slide snap" style="overflow-y: scroll;">
                <div class="slide" style="background: #b794f4;">
                    5
                </div>
                <div class="slide" style="background: #f6e05e;">
                    6
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {};
</script>

<style>
.snap-container {
    scroll-snap-type: y mandatory;
    height: 100vh;
    width: 100vw;
    overflow-y: scroll;
    overflow-x: hidden;
}

.slide {
    height: 100vh;
    width: 100vw;
    color: white;
    font-weight: bold;
    font-size: 3rem;
    overflow-x: hidden;
}

.snap {
    scroll-snap-align: center;
}

.snap:nth-child(odd) {
    background: #f56565;
}

.snap:nth-child(even) {
    background: #63b3ed;
}
</style>

标签： cssvue.jsscroll