Add prevent scroll control to HideScrollbar. Fix can not remove event listener bug. Add auto scroll. #13
@@ -12,11 +12,9 @@ const Home: React.FC = () => {
|
|||||||
preventScrollState: { setPreventScroll }
|
preventScrollState: { setPreventScroll }
|
||||||
} = useContext(MainFrameworkContext)
|
} = useContext(MainFrameworkContext)
|
||||||
const fitFullScreenRef = useRef<HTMLDivElement>(null)
|
const fitFullScreenRef = useRef<HTMLDivElement>(null)
|
||||||
const pathname = useLocation().pathname
|
|
||||||
|
|
||||||
const [slogan, setSlogan] = useState('')
|
const [slogan, setSlogan] = useState('')
|
||||||
const [sloganType, setSloganType] = useState(true)
|
const [sloganType, setSloganType] = useState(true)
|
||||||
const [showSlogan, setShowSlogan] = useState(true)
|
|
||||||
|
|
||||||
const typeText = '/* 因为热爱 所以折腾 */'
|
const typeText = '/* 因为热爱 所以折腾 */'
|
||||||
if (sloganType) {
|
if (sloganType) {
|
||||||
@@ -40,44 +38,27 @@ const Home: React.FC = () => {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setNavbarHidden(true)
|
setNavbarHidden(true)
|
||||||
|
setPreventScroll(true)
|
||||||
})
|
})
|
||||||
}, [setNavbarHidden])
|
}, [setNavbarHidden, setPreventScroll])
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setNavbarHidden(true)
|
|
||||||
}, [pathname, setNavbarHidden])
|
|
||||||
|
|
||||||
const handleScrollToDown = () => {
|
const handleScrollToDown = () => {
|
||||||
hideScrollbarRef.current?.scrollY(fitFullScreenRef.current?.offsetHeight ?? 0)
|
hideScrollbarRef.current?.scrollY(fitFullScreenRef.current?.offsetHeight ?? 0)
|
||||||
|
setNavbarHidden(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleScrollToTop = () => {
|
const handleScrollToTop = () => {
|
||||||
hideScrollbarRef.current?.scrollY(0)
|
hideScrollbarRef.current?.scrollY(0)
|
||||||
|
setNavbarHidden(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleWheel = (event: React.WheelEvent) => {
|
const handleWheel = (event: React.WheelEvent) => {
|
||||||
if (showSlogan) {
|
|
||||||
if (event.deltaY > 0) {
|
if (event.deltaY > 0) {
|
||||||
handleScrollToDown()
|
handleScrollToDown()
|
||||||
setPreventScroll(false)
|
|
||||||
setShowSlogan(false)
|
|
||||||
setNavbarHidden(false)
|
setNavbarHidden(false)
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
console.log(
|
|
||||||
hideScrollbarRef.current?.getY() + ' ' + fitFullScreenRef.current?.offsetHeight
|
|
||||||
)
|
|
||||||
if (
|
|
||||||
hideScrollbarRef.current &&
|
|
||||||
fitFullScreenRef.current &&
|
|
||||||
hideScrollbarRef.current.getY() < fitFullScreenRef.current.offsetHeight
|
|
||||||
) {
|
|
||||||
console.log('上翻')
|
|
||||||
setPreventScroll(true)
|
|
||||||
setShowSlogan(true)
|
|
||||||
setNavbarHidden(true)
|
|
||||||
handleScrollToTop()
|
handleScrollToTop()
|
||||||
}
|
setNavbarHidden(true)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -35,7 +35,7 @@ const MainFramework: React.FC = () => {
|
|||||||
const hideScrollbarRef = useRef<HideScrollbarElement>(null)
|
const hideScrollbarRef = useRef<HideScrollbarElement>(null)
|
||||||
|
|
||||||
const [navbarHidden, setNavbarHidden] = useState(true)
|
const [navbarHidden, setNavbarHidden] = useState(true)
|
||||||
const [preventScroll, setPreventScroll] = useState(true)
|
const [preventScroll, setPreventScroll] = useState(false)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setNavbarHidden(false)
|
setNavbarHidden(false)
|
||||||
|
|||||||
Reference in New Issue
Block a user