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

我在React中构建了一个组件，它应该在窗口滚动上更新自己的风格，以创建视差效果。

组件渲染方法是这样的:

  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。然而，这使得滚动无法使用，因为它非常慢。

有什么建议吗?

当前回答

用钩子:

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); 
};

2020-04-03 18:14:28

其他回答

我发现我不能成功地添加事件监听器，除非我像这样传递true:

componentDidMount = () => {
    window.addEventListener('scroll', this.handleScroll, true);
},

2018-12-27 13:37:52

如果你发现上面的答案对你不起作用，试试这个:

React.useEffect(() => {
    document.addEventListener('wheel', yourCallbackHere)
    return () => {
        document.removeEventListener('wheel', yourCallbackHere)
    }
}, [yourCallbackHere])

基本上，你需要尝试用文档代替窗口，用滚轮代替滚动。

编码快乐!

2021-08-03 20:50:19

用钩子:

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); 
};

2020-04-03 18:14:28

下面是另一个使用HOOKS fontAwesomeIcon和Kendo UI React的例子 [![这里截图][1]][1]

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';


const ScrollBackToTop = () => {
  const [show, handleShow] = useState(false);

  useEffect(() => {
    window.addEventListener('scroll', () => {
      if (window.scrollY > 1200) {
        handleShow(true);
      } else handleShow(false);
    });
    return () => {
      window.removeEventListener('scroll');
    };
  }, []);

  const backToTop = () => {
    window.scroll({ top: 0, behavior: 'smooth' });
  };

  return (
    <div>
      {show && (
      <div className="backToTop text-center">
        <button className="backToTop-btn k-button " onClick={() => backToTop()} >
          <div className="d-none d-xl-block mr-1">Top</div>
          <FontAwesomeIcon icon="chevron-up"/>
        </button>
      </div>
      )}
    </div>
  );
};

export default ScrollBackToTop;```


  [1]: https://i.stack.imgur.com/ZquHI.png

2020-06-19 17:05:18

我的解决方案，使一个响应式导航栏(位置:“相对”时不滚动和固定时滚动，而不是在页面顶部)

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

componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
}
handleScroll(event) {
    if (window.scrollY === 0 && this.state.scrolling === true) {
        this.setState({scrolling: false});
    }
    else if (window.scrollY !== 0 && this.state.scrolling !== true) {
        this.setState({scrolling: true});
    }
}
    <Navbar
            style={{color: '#06DCD6', borderWidth: 0, position: this.state.scrolling ? 'fixed' : 'relative', top: 0, width: '100vw', zIndex: 1}}
        >

对我来说没有性能问题。

2018-01-05 21:18:02

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

推荐文章

最新文章

标签