Question

我在不同的最新浏览器上对其进行了测试，因此不会出现兼容性问题。我正在使用带有样式化组件的create-react-app，这是我的代码：

import React, { Component } from 'react';
import styled, { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
@import url('https://fonts.googleapis.com/css?family=Merriweather|Oleo+Script');
`

const Wrapper = styled.div`
  scroll-snap-type: y mandatory;
  display: flex;
  flex-direction: column;
  font-size: 16px;
`

const Home = styled.div`
  scroll-snap-align: center;
  height: 100vh;
  background-color: yellow;
  display: flex;
  flex-direction: row;
`

const Menu = styled.div`
  scroll-snap-align: center;
  height: 100vh;
  background-color: blue;
  display: grid;
`

const Speciality = styled.div`
  scroll-snap-align: center;
  height: 100vh;
  background-color: green;
`

class App extends Component {

  render() {
    return (
      <Wrapper>
        <GlobalStyle />
        <Home />
        <Menu />
        <Speciality />
      </Wrapper>
    );
  }
}

export default App;

在滚动时它什么也没做，我几乎尝试了任何事情。没有样式组件也将无法使用。

编辑：我将代码复制到了codeandbox：https://codesandbox.io/s/72jmn1p1w1

Answer 1

而不是将scroll-snap-type: y mandatory应用于父div，请尝试将其应用于html：

html {scroll-snap-type: y mandatory}

Answer 2

我在使用 scroll-snap 时也遇到了一些问题。

对我来说，如果没有 overflow-y: scroll，这将不起作用，请尝试将其放在您的 Wrapper 上。

CSS滚动快照在React应用程序中的div上不起作用

2 个答案: