在 React 中更新Scroll 上的组件样式.js

javascript reactjs

2022-08-30 01:21:36

我在 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 不知道组件已更改，因此不会重新呈现组件。

我尝试将的值存储在组件的状态中，并调用滚动回调。但是，这使得滚动不可用，因为这非常慢。itemTranslatesetState

关于如何做到这一点的任何建议？

答案 1

您应该将侦听器绑定到中，这样它只会创建一次。您应该能够在状态下存储样式，侦听器可能是导致性能问题的原因。componentDidMount

像这样：

componentDidMount: function() {
    window.addEventListener('scroll', this.handleScroll);
},

componentWillUnmount: function() {
    window.removeEventListener('scroll', this.handleScroll);
},

handleScroll: function(event) {
    let scrollTop = event.srcElement.body.scrollTop,
        itemTranslate = Math.min(0, scrollTop/3 - 60);

    this.setState({
      transform: itemTranslate
    });
},

答案 2

带挂钩：

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

function MyApp () {

    const [offset, setOffset] = useState(0);

    useEffect(() => {
        const onScroll = () => setOffset(window.pageYOffset);
        // clean up code
        window.removeEventListener('scroll', onScroll);
        window.addEventListener('scroll', onScroll, { passive: true });
        return () => window.removeEventListener('scroll', onScroll);
    }, []);

    console.log(offset); 
};