0

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

但是在 Chrome 桌面（以及 Edge 桌面）上，我的滚动动画非常不稳定/滞后，以至于我认为它不能按原样使用。

我一直在寻找几个小时，但无济于事。任何帮助或领导或想法将不胜感激。

我在 Windows 10 上。

这是 snap 容器和项目的 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
4

0 回答 0