Я создал компонент в React, который должен обновлять свой стиль при прокрутке окна, чтобы создать эффект параллакса.
Метод компонента render
выглядит следующим образом:
function() {
let style = { transform: 'translateY(0px)' };
window.addEventListener('scroll', (event) => {
let scrollTop = event.srcElement.body.scrollTop,
itemTranslate = Math.min(0, scrollTop/3 - 60);
style.transform = 'translateY(' + itemTranslate + 'px)');
});
return (
<div style={style}></div>
);
}
Это не работает, потому что React не знает, что компонент изменился, и, следовательно, компонент не перерисовывается.
Я попытался сохранить значение itemTranslate
в состоянии компонента и вызвать setState
в обратном вызове прокрутки. Однако это делает прокрутку непригодной, так как она очень медленная.
Любое предложение о том, как это сделать?