react类似抽屉功能滚动

js

import React from 'react'
import img from "./../public/455.png"
import './Date.css'

export default () => {
  return (
    <div className="container" >
      <div className="bai"></div>
      <div className="bcg"></div>

      <div className="head">
        <img src={img} className="headImg"></img>
      </div>
    </div>
  )

}

css

.container{
  position: relative;
  top: 258px;
  height: calc(100vh - 258px);
  overflow: hidden;
}
.bai{
  background: red;
  height: 100px;
  position: relative;
}
.head{
  height: calc(100% - 120px);
  overflow: scroll;
  position: relative;
  margin-top: calc(-100vh + 378px)
}
.bcg{
  background: #ff0;
  height: calc(100vh - 258px - 100px);
  width: 100vw;
  border-radius: 35px;
  border-bottom-right-radius:0px;
  border-bottom-left-radius:0px
}
.headImg{
  overflow-y: scroll;
  width: 90%;
  position: relative;
  border-radius: 35px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}