小编b4l*_*4g3的帖子

css scroll snap 不适用于 React 应用程序中的 div

我在不同的最新浏览器上对其进行了测试,因此它不可能是兼容性问题。我正在使用带有样式组件的 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 …
Run Code Online (Sandbox Code Playgroud)

css scroll reactjs scroll-snap-points styled-components

5
推荐指数
2
解决办法
1875
查看次数