在 React 中更新滚动事件的样式

Question

我试图在用户滚动页面时更改页眉的颜色样式，但是，我的 onScroll 方法似乎甚至没有触发。有人可以告诉我为什么以及如何解决这个问题吗？正在底部 TemplateWrapper 组件上调用 onScroll 方法。另外，如果您对如何以不同的方式进行操作有任何其他建议，我会洗耳恭听！谢谢！

const headerStyle = {
      background: 'grey',
      marginBottom: '1.45rem',
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100%',
      zIndex: '99'
}

const modHeader = () => {
  headerStyle.background = 'white'
  console.log('scroll')
}

const Header = () => (

  <div className='header'
    style={headerStyle}
  >
    <div
      style={{
        margin: '0 auto',
        maxWidth: 1160,
        padding: '1.45rem 1.0875rem',
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between'
      }}
    >
      <h1 style={{ margin: 0 }}>
        <Link
            to="/"
            style={{
              color: 'white',
              textDecoration: 'none',
            }}
          >
            Gatsby
        </Link>
      </h1>
      <h2 style={{ margin: 0 }}>  
        <Link
          to="/about"
          style={{
            color: 'white',
            textDecoration: 'none',
          }}
        >
          About
        </Link>
      </h2>
    </div>
  </div>
)

const TemplateWrapper = ({
  children
}) => (
    <div onScroll={modHeader}>
      <Helmet
        title="Gatsby Default Starter"
        meta={[
          { name: 'description', content: 'Sample' },
          { name: 'keywords', content: 'sample, something' },
        ]}
      />
      <Header />
      <div 
        style={{
          margin: '0 auto',
          maxWidth: 960,
          padding: '0px 1.0875rem 1.45rem',
          paddingTop: 0,
        }}
      >
        {children()}
      </div>
    </div>
  )

export default TemplateWrapper

Answer 1

您需要在 componentDidMount 并将你的值存储在状态中，你需要在滚动时重新渲染你的组件，

componentDidMount = () => {
   window.addEventListener('scroll', ()=>{
     this.setState({
       // your flags
      });
    });
   };

注意：如果你想给你的div添加事件监听器，你可以像这样通过ref访问它，

componentDidMount = () => {
   this.listener.addEventListener('scroll', ()=>{
     this.setState({
       // your flags
      });
    });
   };
render(){
   return( 
       <div ref={(listener) => { this.listener = listener }}></div>
    )
 }

在 React 中更新滚动事件的样式

Update style on scroll event in React

javascript

css

reactjs

gatsby