1

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

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
4

1 回答 1

2

您需要在 componentDidMount 中添加一个事件监听器并将您的值存储在状态中，您需要重新渲染您的组件 onScroll，

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

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

componentDidMount = () => {
   this.listener.addEventListener('scroll', ()=>{
     this.setState({
       // your flags
      });
    });
   };
render(){
   return( 
       <div ref={(listener) => { this.listener = listener }}></div>
    )
 }
于 2017-08-21T03:26:27.823 回答