苹果橡皮筋解决办法react版本

最新推荐文章于 2022-10-21 23:01:58 发布

陕北锤王

最新推荐文章于 2022-10-21 23:01:58 发布

阅读量211

点赞数

文章标签： javascript 前端开发语言 react

本文链接：https://blog.csdn.net/m0_61060079/article/details/126139899

版权

import React, { useEffect, useRef } from 'react'
import './index3.less'
export default function Index3() {
    const box = useRef<HTMLDivElement>(null)
    const con = useRef<HTMLDivElement>(null)
    const input = useRef<HTMLInputElement>(null)
    useEffect(()=>{
        (con.current!.children[0] as HTMLDivElement).style.height = con.current!.offsetHeight +2 +'px'
        box.current!.scrollTop = 1
        box.current!.onscroll =()=>{
            // document.title = `${box.current!.scrollTop}`
            box.current!.scrollTop === 0 || box.current!.scrollTop === 2 ?box.current!.scrollTop = 1:console.log();
        }
    },[])
    document.ontouchmove =()=>{
        input.current!.blur()
    }
  return (
    <div className="mybox" ref={box}>
        <div className="header">
            <input type="text" ref={input}/>
        </div>
        <div className="con" ref={con}>
            <div>搜索记录</div>
        </div>
    </div>
  )
}

.mybox {
    position: fixed;
    width: 100vw;
    height: 100vh;
    overflow-y: scroll;
    display: flex;
    .header {
      position: fixed;
      width: 100vw;
      height: 100px;
      background:#F63866;
      input {
        width: 80%;
        height: 60px;
        border-radius: 50px;
        padding-left: 30px;
        border:none;
        display: block;
        margin:20px auto;
      }
    }
    .con {
      width: 100vw;
      flex:1;
      background-color: #ffffff;
      margin-top: 100px;
      div {
        text-align: center;
        font-size: 40px;
        font-weight: bold;
      }
    }
  }
  .mybox::-webkit-scrollbar {
    display: none;
  }