相关疑难解决方法(0)

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

我在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>
    );
  }
Run Code Online (Sandbox Code Playgroud)

这不起作用,因为React不知道组件已更改,因此组件不会被重新呈现.

我已经尝试将值存储在itemTranslate组件的状态中,并调用setState滚动回调.但是,这使得滚动无法使用,因为这非常慢.

有关如何做到这一点的任何建议?

谢谢.

javascript reactjs

111
推荐指数
11
解决办法
15万
查看次数

标签 统计

javascript ×1

reactjs ×1