监听窗口大小
重要代码
const getWindowSize = () => ({
innerHeight: window.innerHeight,
innerWidth: window.innerWidth,
});
const [windowSize, setWindowSize] = useState(getWindowSize());
const handleResize = () => {
setWindowSize(getWindowSize());
};
useLayoutEffect(() => {
window.addEventListener("resize", changeDataList);
changeDataList()
return () => window.removeEventListener("resize", handleResize);
},[]);
less部分
.bookdiv{
.bookdiv_child{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
.booklist{
width: 159px;
img{
width: 149px;
height: 200px;
}
.read_name{
color: #000;
font-size: 18px;
text-align: center;
}
}
}
& .bookdiv_child:last-child{
justify-content: start;
}
}
全部代码
import Header from "../../components/header/index";
import Footer from "../../components/footer/index";
import { bookdata } from "./js/data";
import { chunk } from "lodash";
import {useLayoutEffect, useEffect, useState } from "react";
const Read = () => {
const [newDataList, setDataList]: any = useState([]);
const changeDataList = () => {
const num = Math.floor((document.documentElement.scrollLeft+document.documentElement.clientWidth)/159);
const data = chunk(bookdata, num);
setDataList(data);
};
const getWindowSize = () => ({
innerHeight: window.innerHeight,
innerWidth: window.innerWidth,
});
const [windowSize, setWindowSize] = useState(getWindowSize());
const handleResize = () => {
setWindowSize(getWindowSize());
};
useLayoutEffect(() => {
window.addEventListener("resize", changeDataList);
changeDataList()
return () => window.removeEventListener("resize", handleResize);
},[]);
return (
<>
<Header headeractive={4}></Header>
<div className="bookdiv">
{newDataList.map((item: any, index: any) => {
return (
<div className="bookdiv_child" key={index}>
{item.map((itemchild: any) => {
return (
<div
key={itemchild.id + index}
className={`booklist animate__animated ${itemchild.classname}`}
>
<div className="centerimg">
<img src={itemchild.imgsrc} alt={itemchild.name} />
</div>
<div className="read_name">{itemchild.name}</div>
</div>
);
})}
</div>
);
})}
</div>
<Footer></Footer>
</>
);
};
export default Read;
监听窗口滚动距离
const handleResize = () => {
setWindowSize(getWindowSize());
};
const getWindowSize = () => {
let h5Scroll = {
scrollTop: 0,
};
if (document?.documentElement && document?.documentElement?.scrollTop) {
h5Scroll.scrollTop = document.documentElement.scrollTop;
} else if (document?.body) {
h5Scroll.scrollTop = document.body.scrollTop;
}
console.log(h5Scroll.scrollTop)
return h5Scroll;
};
const [windowSize, setWindowSize] = useState(getWindowSize());
useEffect(() => {
window.addEventListener("scroll", handleResize);
return () => {
window.removeEventListener("scroll", handleResize);
};
}, []);
监听滚动方向
js部分
const [positionFlag, setpositionFlag] = useState(false);
let valueTop = 0;
let scrollTop = 0;
const getWindowSize = () => {
let h5Scroll = {
scrollTop: 0,
};
if (document?.documentElement && document?.documentElement?.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if (document?.body) {
scrollTop = document.body.scrollTop;
}
setTimeout(() => {
valueTop = scrollTop;
}, 0);
if (valueTop < scrollTop) {
console.log("向下");
setpositionFlag(false);
}
if (valueTop > scrollTop) {
console.log("向上");
setpositionFlag(true);
}
return h5Scroll;
};
useEffect(() => {
window.addEventListener("scroll", getWindowSize);
return () => {
window.removeEventListener("scroll", getWindowSize);
};
}, []);
页面结构
<div
className={mergeClass({
ceiling: positionFlag,
noneceiling: !positionFlag,
})}
>
<Marqueecom data={marqueedata}></Marqueecom>
</div>
全部代码
import Header from "../../components/header/index";
import Footer from "../../components/footer/index";
import Marqueecom from "./components/marquee";
import { TRAVEL_DATA, marqueedata } from "./js/data";
import { useEffect, useState } from "react";
import mergeClass from "../../utils/mergeClass";
const Travel = () => {
const [positionFlag, setpositionFlag] = useState(false);
let valueTop = 0;
let scrollTop = 0;
const getWindowSize = () => {
let h5Scroll = {
scrollTop: 0,
};
if (document?.documentElement && document?.documentElement?.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if (document?.body) {
scrollTop = document.body.scrollTop;
}
setTimeout(() => {
valueTop = scrollTop;
}, 0);
if (valueTop < scrollTop) {
console.log("向下");
setpositionFlag(false);
}
if (valueTop > scrollTop) {
console.log("向上");
setpositionFlag(true);
}
return h5Scroll;
};
useEffect(() => {
window.addEventListener("scroll", getWindowSize);
return () => {
window.removeEventListener("scroll", getWindowSize);
};
}, []);
return (
<div className="travel">
<Header headeractive={3}></Header>
<div
className={mergeClass({
ceiling: positionFlag,
noneceiling: !positionFlag,
})}
>
<Marqueecom data={marqueedata}></Marqueecom>
</div>
<main>
{TRAVEL_DATA.map((item, index) => {
return (
<div
key={index}
className={`travel_div animate__animated ${item.classname}`}
>
<img src={item.imgsrc} alt="" />
</div>
);
})}
</main>
<Footer></Footer>
</div>
);
};
export default Travel;