HTML 播放 css 动画时滚动捕捉不起作用

Question

我有一个带有滚动捕捉和 css 动画的页面。滚动捕捉工作正常，除了播放 css 动画。 css 动画不播放时，滚动捕捉滚动流畅，播放时瞬间滚动，不流畅。有人知道为什么会发生这种情况以及如何解决它吗？

:root {
    --white: #fff;
    --gray: #3f5060;
    --red: #e2403d;
    --orange: #ef9325;
    --blue: #3fa4dc;

    --darken-50: #b0b0b066;
    --darken-75: #b0b0b0aa;

    --background: #3f5060;
    --font: #ffffff;
    --header: #000000;
    --header-button: #000000;
    --header-button-hover: #ef9325;
    --button-color: #ef9325;
    --button-color-hover: #ffa335;
}
.section {position:absolute;left:0px;height:100%;width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;scroll-snap-align: start;}
.decor-box-orange {background-color:var(--orange);position:absolute}
html {
    background-color: var(--background);
    font-family: medium;
    color: var(--font);
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}
@keyframes section2decorbox {
    0% {left:-100%;}
    10% {left:-100%;}
    30% {left:0%;}
    70% {left:0%;}
    90% {left:100%;}
    100% {left:100%;}
}

@keyframes section2decorbox2 {
    0% {left:100%;}
    10% {left:100%;}
    30% {left:0%;}
    70% {left:0%;}
    90% {left:-100%;}
    100% {left:-100%;}
}

<section class="section" style="top:0px;overflow: hidden;">
this is the 1st section    
</section>
<section class="section" style="top:100%;background:var(--blue);">
    <div style="animation:section2decorbox 10s alternate infinite;position:absolute;width:100%;height:10%;top:20%;z-index:1;" class="decor-box-orange"></div>
    <div style="animation:section2decorbox2 10s alternate infinite;position:absolute;width:100%;height:10%;top:70%;z-index:1;" class="decor-box-orange"></div>
    <h1 style="z-index:2;">H1</h1>
    <p style="width:50%;z-index:2;" align="center">P text</p>
</section>

Answer 1

:root {
    --white: #fff;
    --gray: #3f5060;
    --red: #e2403d;
    --orange: #ef9325;
    --blue: #3fa4dc;

    --darken-50: #b0b0b066;
    --darken-75: #b0b0b0aa;

    --background: #3f5060;
    --font: #ffffff;
    --header: #000000;
    --header-button: #000000;
    --header-button-hover: #ef9325;
    --button-color: #ef9325;
    --button-color-hover: #ffa335;
}
.section {position:absolute;left:0px;height:100%;width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;scroll-snap-align: start;}
.decor-box-orange {background-color:var(--orange);position:absolute}
html {
    background-color: var(--background);
    font-family: medium;
    color: var(--font);
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}
@keyframes section2decorbox {
    0% {left:-100%;}
    10% {left:-100%;}
    30% {left:0%;}
    70% {left:0%;}
    90% {left:100%;}
    100% {left:100%;}
}

@keyframes section2decorbox2 {
    0% {left:100%;}
    10% {left:100%;}
    30% {left:0%;}
    70% {left:0%;}
    90% {left:-100%;}
    100% {left:-100%;}
}

<section class="section" style="top:0px;overflow: hidden;">
this is the 1st section    
</section>
<section class="section" style="top:100%;background:var(--blue);">
    <div style="animation:section2decorbox 10s alternate infinite;position:absolute;width:100%;height:10%;top:20%;z-index:1;" class="decor-box-orange"></div>
    <div style="animation:section2decorbox2 10s alternate infinite;position:absolute;width:100%;height:10%;top:70%;z-index:1;" class="decor-box-orange"></div>
    <h1 style="z-index:2;">H1</h1>
    <p style="width:50%;z-index:2;" align="center">P text</p>
</section>

Answer 2

我通过将它从
scroll-snap-type: y mandatory;
设置为
scroll-snap-type: y proximity;
来修复它，这没有使滚动在播放 css 动画时捕捉到另一个部分时立即且仍然流畅。

HTML 播放 css 动画时滚动捕捉不起作用

HTML scroll-snap doesn't work when a css animation is playing

html

css

css-animations