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

有什么建议吗?

当前回答

你可以传递一个函数给React元素的onScroll事件:https://facebook.github.io/react/docs/events.html#ui-events

<ScrollableComponent
 onScroll={this.handleScroll}
/>

另一个类似的答案是:https://stackoverflow.com/a/36207913/1255973

2016-10-05 22:18:14

其他回答

为了帮助那些在使用austin answer时注意到延迟行为/性能问题的人，并想要一个使用评论中提到的引用的例子，这里有一个我用来切换一个类的滚动向上/向下图标的例子:

在渲染方法中:

<i ref={(ref) => this.scrollIcon = ref} className="fa fa-2x fa-chevron-down"></i>

在handler方法中:

if (this.scrollIcon !== null) {
  if(($(document).scrollTop() + $(window).height() / 2) > ($('body').height() / 2)){
    $(this.scrollIcon).attr('class', 'fa fa-2x fa-chevron-up');
  }else{
    $(this.scrollIcon).attr('class', 'fa fa-2x fa-chevron-down');
  }
}

然后像Austin提到的那样添加/删除你的处理程序:

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

裁判的文件。

2016-02-17 20:35:06

我在这里打赌是使用带有新钩子的函数组件来解决它，但不是像以前的答案那样使用useEffect，我认为正确的选择是useLayoutEffect，原因很重要:

签名与useEffect相同，但是它同步触发在所有DOM突变之后。

这可以在React文档中找到。如果我们使用useEffect代替，并且重新加载已经滚动的页面，则scroll将为false，并且我们的类将不会被应用，从而导致不希望出现的行为。

一个例子:

import React, { useState, useLayoutEffect } from "react"

const Mycomponent = (props) => {
  const [scrolled, setScrolled] = useState(false)

  useLayoutEffect(() => {
    const handleScroll = e => {
      setScrolled(window.scrollY > 0)
    }

    window.addEventListener("scroll", handleScroll)

    return () => {
      window.removeEventListener("scroll", handleScroll)
    }
  }, [])

  ...

  return (
    <div className={scrolled ? "myComponent--scrolled" : ""}>
       ...
    </div>
  )
}

这个问题的一个可能的解决方案是https://codepen.io/dcalderon/pen/mdJzOYq

const Item = (props) => { 
  const [scrollY, setScrollY] = React.useState(0)

  React.useLayoutEffect(() => {
    const handleScroll = e => {
      setScrollY(window.scrollY)
    }

    window.addEventListener("scroll", handleScroll)

    return () => {
      window.removeEventListener("scroll", handleScroll)
    }
  }, [])

  return (
    <div class="item" style={{'--scrollY': `${Math.min(0, scrollY/3 - 60)}px`}}>
      Item
    </div>
  )
}

2020-03-23 18:58:08

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

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

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

编码快乐!

2021-08-03 20:50:19

你可以传递一个函数给React元素的onScroll事件:https://facebook.github.io/react/docs/events.html#ui-events

<ScrollableComponent
 onScroll={this.handleScroll}
/>

另一个类似的答案是:https://stackoverflow.com/a/36207913/1255973

2016-10-05 22:18:14

您应该在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
    });
},

2015-04-19 05:02:20

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

推荐文章

最新文章

标签