垂直滚动捕捉不适用于 Next.js

Question

我正在尝试在我的 Next.js 项目中使用滚动快照 css 功能。还没有做过这样的功能。参考文章是this one。在将 scroll-snap-type 应用到父项并将 scroll-snap-align 应用到子项（start/center ......所有这些）之后，我的滚动行为正常。无法理解我所缺少的东西。

这里是index.js

import React from 'react'
import '../index.css'

import Carusel from '../components/carusel'

const Home = () => (
  <div>
    <Carusel />
  </div>
)

export default Home

这里是carusel.js

import React, { Component } from 'react'

class Carusel extends Component {
  render() {
    return (
      <section className='container'>
        <h1 className='child' >Slide 1</h1>
        <h1 className='child' >Slide 2</h1>
        <h1 className='child' >Slide 3</h1>
        <h1 className='child' >Slide 4</h1>
        <h1 className='child' >Slide 5</h1>
        <style jsx>{`
          .container {
            width: calc(100vw-(100vw-100%));
            height: 100vh;
            text-align: center;
            scroll-snap-type: y proximity;
            scroll-padding: 10px;
          }
          .child {
            height: 100%;
            scroll-snap-align: center;
          }
          .child :nth-child(odd) {
            background-color: red;
          }
          .child :nth-child(even) {
            background-color: green;
          }
      `}</style>
      </section>
    )
  }
}

export default Carusel

这里是index.css

html {
  overflow-y: scroll;
}

Answer 1

很可能是因为您正在滚动正文而不是 'container'

.container {
  width: calc(100vw - (100vw - 100%));
  height: 100vh;
  text-align: center;
  scroll-snap-type: y mandatory;
  scroll-padding: 10px;
  overflow-y: scroll;
}

.child {
  height: 100%;
  scroll-snap-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child :nth-child(odd) {
  background-color: red;
}

.child :nth-child(even) {
  background-color: green;
}

<section class='container'>
  <h1 class='child'>Slide 1</h1>
  <h1 class='child'>Slide 2</h1>
  <h1 class='child'>Slide 3</h1>
  <h1 class='child'>Slide 4</h1>
  <h1 class='child'>Slide 5</h1>
</section>

PS: scroll snap 在 Firefox 中不受支持

垂直滚动捕捉不适用于 Next.js

Vertical scroll snap doesn't work with Next.js

javascript

css

scroll

reactjs

next.js