Почему этот элемент фиксируется, но не является относительным при прокрутке назад?
Я пытался сделать позицию элемента: «фиксированной» после того, как она прокручивается до конца экрана, и всякий раз, когда она возвращается к первому экрану, она должна снова получить позицию как «относительную», но состояние меняется на истинное (фиксированное) когда он прокручивается до конца экрана, но когда он прокручивается назад, он не меняется на false (относительно).
const [fixed, setFixed] = useState(() => {
return false;
});
const scrollHandler = () => {
if (window.scrollY > window.innerHeight) {
if (!fixed) {
setFixed(true);
}
} else {
if (fixed) {
setFixed(false);
}
}
};
useEffect(() => {
window.addEventListener("scroll", scrollHandler);
return () => {
window.removeEventListener("scroll", scrollHandler);
};
}, []);
return (
<>
<div
style = {{ position: `${fixed ? "fixed" : "relative"}` }}
className = {classes.navigationBelt}
></div>
</> );
Вот объяснение кода Я взял состояние с именем «фиксированное» и начальное значение как «ложное».
const [fixed, setFixed] = useState(() => {
return false;
});
Я добавил eventListener в окно для прокрутки, когда компонент монтируется в дом.
useEffect(() => {
window.addEventListener("scroll", scrollHandler);
return () => {
window.removeEventListener("scroll", scrollHandler);
};
}, []);
Для обработки события прокрутки я создал функцию с именем «scrollHandler».
const scrollHandler = () => {
if (window.scrollY > window.innerHeight) {
if (!fixed) {
setFixed(true);
}
} else {
if (fixed) {
setFixed(false);
}
}
};
Я устанавливаю «фиксированный» на «истинный», когда прокрутка больше, чем высота окна, и делаю элемент «фиксированным». Примечание. Я обновляю состояние только тогда, когда «фиксированное» состояние ложно, иначе это приведет к многократному повторному рендерингу.
return (
<>
<div
style = {{ position: `${fixed ? "fixed" : "relative"}` }}
className = {classes.navigationBelt}
></div>
</> );
Он работает нормально, но когда он прокручивается назад, и условие «иначе» все равно попадает в состояние («фиксированное»), оно показывается как ложное, даже если оно изменилось, а элемент уже исправлен. Из-за этого setFixed(false) не работает, так как внешнее условие по-прежнему ложно.
else {
if (fixed) {
setFixed(false);
}
}
Я хотел знать, почему это происходит?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Потому что scrollHandler, который вы прикрепляете к окну, имеет доступ к переменной fixed, когда она находится в false (начальное состояние).
Вы прикрепляете его к useEffect, который запускается только один раз, поэтому он всегда будет сохранять ссылку на scrollHandler.
Вы можете передать fixed как зависимость к useEffect, и таким образом он обновит/обновит обработчик событий.
useEffect(() => {
window.addEventListener("scroll", scrollHandler);
return () => {
window.removeEventListener("scroll", scrollHandler);
};
}, [fixed]);
В приведенном выше решении есть «проблема», заключающаяся в том, что вам нужно знать, что делает scrollHandler, чтобы указать/обновить список зависимостей useEffect.
Более разумным подходом было бы повторно запустить useEffect, когда scrollHandler изменится, поскольку он используется внутри useEffect (и это реальная зависимость от этого useEffect)
useEffect(() => {
window.addEventListener("scroll", scrollHandler);
return () => {
window.removeEventListener("scroll", scrollHandler);
};
}, [scrollHandler]);
Но поскольку ваш код будет изменять обработчик scrollHandler при каждом повторном рендеринге компонента, вы должны попытаться сделать его максимально «стабильным», то есть сохранить/повторно использовать одну и ту же ссылку для этой функции, в то время как ее собственные зависимости одинаковый. Для этого вы можете использовать useCallback и использовать fixed как его зависимость.
const scrollHandler = useCallback(() => {
if (window.scrollY > window.innerHeight) {
if (!fixed) {
setFixed(true);
}
} else {
if (fixed) {
setFixed(false);
}
}
}, [fixed]);
Я не очень хорошо знаком с реакцией, но мне интересно, есть ли какие-либо проблемы, чтобы сделать это с дополнительной ссылкой? против того, что это не так элегантно, но тоже может быть приятно, если useEffect не срабатывает на ререндере страницы?
export default function Home() {
const [fixed, setFixed] = useState(false);
const myFixedRef = useRef(fixed);
const listener = () => {
if (window.scrollY > window.innerHeight) {
if (!myFixedRef.current) {
setFixed((myFixedRef.current = true));
}
} else {
if (myFixedRef.current) {
setFixed((myFixedRef.current = false));
}
}
};
useEffect(() => {
window.addEventListener("scroll", listener);
return () => {
window.removeEventListener("scroll", listener);
};
}, []);
Таким образом, я также могу получить правильное начальное состояние.
useEffect(() => {
listener(); // to get the initial state
window.addEventListener("scroll", listener);
return () => {
window.removeEventListener("scroll", listener);
};
}, []);
я рад услышать лучший вариант использования