Как пофиксить данный баг со скроллом в React?

Question

[Дмитрий Путилов]

Есть вот такой код

import React, {useEffect, useRef, useState} from 'react'
import {background, container} from "../../../UI_Style/default";
import {NavLink} from "react-router-dom";

const Header = () => {

    const [scroll, setScroll] = useState<boolean>(false)
    const heightHeaderRef = useRef<HTMLDivElement | null>(null)

    const scrollPage = ():void => {
        window.addEventListener('scroll', () => {
            const heightTop: number = window.scrollY

            if(heightHeaderRef.current && heightHeaderRef.current.offsetHeight < heightTop && !scroll)
                setScroll(true)

            if(heightHeaderRef.current && heightHeaderRef.current.offsetHeight > heightTop && scroll)
                setScroll(false)

            if(heightHeaderRef.current)
                console.log(heightTop, heightHeaderRef.current?.offsetHeight, scroll)
        })
    }

    useEffect(() => {
        scrollPage()
    }, [])

  return (
    <header className={`${background} sticky top-0 left-0`} ref={heightHeaderRef}>
        <div className={`${container} ${scroll ? 'py-2' : 'py-6'} duration-300`}>
            <div className={'flex justify-between items-center'}>

                <div className={'flex'}>
                    <NavLink to={''} className={'text-xl text-white mr-6'}>ГЛАВНАЯ</NavLink>
                    <NavLink to={'/about'} className={'text-xl text-white mr-6'}>О НАС</NavLink>
                    <NavLink to={'/crm'} className={'text-xl text-white mr-6'}>CRM</NavLink>
                    <NavLink to={'/licenses'} className={'text-xl text-white mr-6'}>ЛИЦЕНЗИИ</NavLink>
                    <NavLink to={'/blog'} className={'text-xl text-white mr-6'}>БЛОГ</NavLink>
                    <NavLink to={'/faq'} className={'text-xl text-white'}>FAQ</NavLink>
                </div>

                <div>
                    <a className={'text-white text-center block text-2xl'} href="tel::[phone]">[phone]</a>
                    <div className={'text-white text-center block text-xs'}>ЗВОНОК ПО РОССИИ БЕСПЛАТНЫЙ</div>
                </div>
            </div>
        </div>
    </header>
  )
}

export default Header

И проблема в том, что я вывел scroll и он постоянно равен false, хотя он точно меняется

И вопрос в том, как я могу реализовать, что бы в функции менялся scroll

Answer 1

[Артем]

Сделай отдельно кастомный хук, который будет принимать реф на элемент и возвращать true/false.

useScroll.ts

import React, { useLayoutEffect, useState} from 'react'; 

 export const useScroll = ( ref ) => { 
     const [ scroll, setScroll ] = useState(false); 
     const updateScroll      = () => {
            If (!ref.current) return

            let isScroll = false
            const heightTop: number = window.scrollY

            if(ref.current.offsetHeight < heightTop) 
            isScroll = true
       

            if(heightHeaderRef.current.offsetHeight > heightTop)
            isScroll = false

            setScroll(isScroll)
}
  
     useLayoutEffect( () => { 
         window.addEventListener('scroll',updateScroll)
         updateScroll(); 
         return () => {
               window.removeEventListener('scroll',updateScroll)
         } 
     }, [] ); 
     return scroll; 
 }

И теперь в компоненте

const Header = () => {
    const heightHeaderRef = useRef<HTMLDivElement | null>(null)
    const scroll = useScroll<boolean>(heightHeaderRef)

    console.log(scroll)
  return (
    <header className={`${background} sticky top-0 left-0`} ref={heightHeaderRef}>
        <div className={`${container} ${scroll ? 'py-2' : 'py-6'} duration-300`}>
            <div className={'flex justify-between items-center'}>

                <div className={'flex'}>
                    <NavLink to={''} className={'text-xl text-white mr-6'}>ГЛАВНАЯ</NavLink>
                    <NavLink to={'/about'} className={'text-xl text-white mr-6'}>О НАС</NavLink>
                    <NavLink to={'/crm'} className={'text-xl text-white mr-6'}>CRM</NavLink>
                    <NavLink to={'/licenses'} className={'text-xl text-white mr-6'}>ЛИЦЕНЗИИ</NavLink>
                    <NavLink to={'/blog'} className={'text-xl text-white mr-6'}>БЛОГ</NavLink>
                    <NavLink to={'/faq'} className={'text-xl text-white'}>FAQ</NavLink>
                </div>

                <div>
                    <a className={'text-white text-center block text-2xl'} href="tel::[phone]">[phone]</a>
                    <div className={'text-white text-center block text-xs'}>ЗВОНОК ПО РОССИИ БЕСПЛАТНЫЙ</div>
                </div>
            </div>
        </div>
    </header>
  )
}

export default Header

Могу где-то ошибиться, пишу с мобилы

Comments

[Дмитрий Путилов]

Спасибо