Chrome桌面上的CSS滚动快照断断续续

Question

我一直在使用滚动快照构建这个页面，它在Firefox桌面上运行良好；移动设备以及Chrome移动设备。

但在Chrome桌面(Edge桌面也是如此(上，我会看到非常起伏/滞后的滚动动画，以至于我认为它不可用。

我找了几个小时都没有找到。任何帮助、引导或想法都将不胜感激。

我使用的是Windows 10。

---

这是快照容器和项目的SCSS：

.works {
margin: 0;
padding: 0;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;

overflow: scroll;
height: calc(100vh - var(--header-height) - 2vh);
width: 100vw;

position: absolute;
top: calc(var(--header-height) + 2vh);

> div {
margin: 0 auto;
padding: 2vh 0 0;     
display: block;
width: clamp(200px, 100vw, 1280px);
min-height: 100%;
z-index: -1; 

background-origin: border-box;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: auto 100%;

border-radius: .5em;
border: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;

display: grid;
grid-template-rows: auto 7rem auto;

scroll-snap-align: start;
scroll-snap-stop: always;    
}
}

以及匹配的React组件：

function Works() {

const contents = worksContents.map( ({ title, year, text, pic }, i)  => {

const styles = {
backgroundImage: `linear-gradient(transparent, #fdfdfd 75%), url(${pic})`,
}


return (

<div key={ i } style={ styles }> 

<span className='title'> { title } </span>

<span className='year'> { year } </span>

{ text }

</div> )

}

)


return (

<section className="works">
{  contents  }
</section>

)
}
export default Works

Answer 1

我只是想再次回答这个问题，因为它也影响了我。Scroll Snap目前在桌面chrome中似乎完全不可用。

我制作了一个代码笔来演示这个问题：https://codepen.io/lumakker/pen/poaybJd

html:

<div class="testdiv" style="background-color:white">
<p>compare between scrolling with mousewheel and scrolling with autoscroll (middle mouse button click). Mousewheell scroll-snap is very choppy on chrome desktop.</p>
</div>
<div class="testdiv" style="background-color:black"></div>
<div class="testdiv" style="background-color:green"></div>
<div class="testdiv" style="background-color:red"></div>

css：

html {
scroll-snap-type: y mandatory;
height: 100%
}
body {
height: 100%
}
.testdiv {
height: 100%;
scroll-snap-align: start;
}

我希望有人有一个解决方案，因为我真的想避免在我的网站上使用自定义的滚动快照js。