import React, { useState } from 'react'
export default function Elevator() {
// window.onscroll = function(){
// console.log('滚动了');
// console.log(document.documentElement.scrollTop);
// let el = document.querySelector('.li2')
// console.log(el.scrollHeight);
// }
let [arr] = useState(['面条','米饭','烤肉','饮品','小吃'])
let [idx,SetIdx] = useState(0)
let [arr2] = useState(['面条1','面条2','面条3','面条4','面条5','米饭1','米饭2','米饭3','米饭4','米饭5','烤肉1','烤肉2','烤肉3','烤肉4','烤肉5','饮品1','饮品2','饮品3','饮品4','饮品5','小吃1','小吃2','小吃3','小吃4','小吃5'])
let ScrollEvent = () =>{
let Scroll = document.querySelector('.Content')
console.log(Scroll.clientHeight,Scroll.scrollTop);
if(Scroll.clientHeight+Scroll.scrollTop < 600){
SetIdx(0)
}else if(Scroll.clientHeight+Scroll.scrollTop > 600 && Scroll.clientHeight+Scroll.scrollTop < 1200){
SetIdx(1)
}else if(Scroll.clientHeight+Scroll.scrollTop > 1200 && Scroll.clientHeight+Scroll.scrollTop < 1800){
SetIdx(2)
}else if(Scroll.clientHeight+Scroll.scrollTop > 1800 && Scroll.clientHeight+Scroll.scrollTop < 2400){
SetIdx(3)
}else if(Scroll.clientHeight+Scroll.scrollTop > 2400){
SetIdx(4)
}
}
let changeHeight = (idx) =>{
let Scroll = document.querySelector('.Content')
if(idx === 0){
Scroll.scrollTop = 0
}else if(idx === 1){
Scroll.scrollTop = 300
}else if(idx === 2){
Scroll.scrollTop = 874
}else if(idx === 3){
Scroll.scrollTop = 1474
}else if(idx === 4){
Scroll.scrollTop = 2100
}
}
return (
<div className='Top' style={{display:'flex',height:'120px'}}>
{
arr.map((item,index)=>(
<div onClick={()=>changeHeight(index)} key={index} style={idx === index ? {background:'yellow',flex:1,textAlign:'center',lineHeight:"120px"} : {flex:1,textAlign:'center',lineHeight:"120px"}} className='top'>
{item}
))
}
<div style={{height:'427px',background:'#eee',overflow:'auto'}} onScroll={()=>ScrollEvent()} className='Content'>
{
arr2.map((item,index)=>(
<div key={index} className='content-div' style={{height:'120px',lineHeight:'120px',textAlign:'center'}}>{item}
))
}
<div className='footer' style={{height:"120px",lineHeight:'120px',position:'sticky',background:'blue'}}>
)
}
