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

Question

我正在尝试在我的 Next.js 元素中使用这个滚动对齐 CSS 功能。还没有做过这样的功能。引用文章是this one .在将 scroll-snap-type 应用到父级并将 scroll-snap-align 应用到子级(开始/居中......所有这些)之后，我的滚动行为正常。无法理解我所缺少的东西。

这是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:Firefox 不支持 scroll snap