首页项目踩坑史

1. 首页最外层加overflow：scroll后，会导致wowjs的效果展示不出来
2. 画一个同心圆

.circle_bot{
    background-color: #fff;
    width: 6px;
    height: 6px;
    margin: 0px 0 0 0px;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 0 4px red;
    top: 460px;
    left: 1255px;
    top: 160px;
    left: 155px;
    -webkit-animation:twinkling 2.1s infinite ease-in-out;
    animation:twinkling 2.1s infinite ease-in-out;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both;
}

3.react Hooks中useState 中改变的值，无法更新到window.scroll的回调中。
应对措施：
总闭包的方式，写一个函数

4.display:inline-block，导致的间距问题。
措施：在in-line-block元素的父级设置font-size:0

5.页面回到顶部

import React,{useState,useEffect,useRef} from 'react';

const scrollEl = useRef(null);

const Test = () => {
    let timer:any = null;
    useEffect(() => {
        let timer = setTimeout(() => {
            scrollEl.current.scrollIntoView(true);
            document.body.style.display = 'block';
            clearTimeout(timer)
        }, 500);

    }, [])
    return (
        <div>
            <div ref={scrollEl}></div>
        </div>
    )
}

export default Test;