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

垂直滚动对齐不适用于Next.js

1 个答案: