基于滚动的切换类React JS

我使用引导程序4导航栏并希望在ig 400px向下滚动后更改背景色。我正在查看反应文档并找到了一个onScroll，但无法找到关于它的很多信息。到目前为止，我已经基于滚动的切换类React JS

我不知道我是否使用正确的事件监听器或如何设置高度等

而且我真的不设置内嵌样式

import React, { Component } from 'react'; 

    class App extends Component { 

    constructor(props) { 
    super(props); 

     this.state = { scrollBackground: 'nav-bg' }; 
     this.handleScroll = this.handleScroll.bind(this); 
    } 


    handleScroll(){ 
     this.setState ({ 
     scrollBackground: !this.state.scrollBackground 
     }) 
    } 

render() { 
const scrollBg = this.scrollBackground ? 'nav-bg scrolling' : 'nav-bg'; 

return (
    <div> 

     <Navbar inverse toggleable className={this.state.scrollBackground} 
            onScroll={this.handleScroll}> 
     ... 
     </Navbar> 

    </div> 
    ); 
    } 
} 

export default App;

来源

2017-06-18 Fernando B

[更新React.js中onScroll组件的样式]的可能副本（https://stackoverflow.com/questions/29725828/update-style-of-a-component-onscroll-in-react-js） – gurch101

我试着用他们有但没有为我工作 –

添加滚动监听器的一种方法是使用componentDidMount()生命周期方法。下面的例子应该给你一个想法：

import React from 'react'; 
import { render } from 'react-dom'; 

class App extends React.Component { 
    state = { 
    isTop: true, 
    }; 

    componentDidMount() { 
    document.addEventListener('scroll',() => { 
     const isTop = window.scrollY < 100; 
     if (isTop !== this.state.isTop) { 
      this.setState({ isTop }) 
     } 
    }); 
    } 
    render() { 
    return (
     <div style={{ height: '200vh' }}> 
     <h2 style={{ position: 'fixed', top: 0 }}>Scroll {this.state.isTop ? 'down' : 'up'}!</h2> 
     </div> 
    ); 
    } 
} 

render(<App />, document.getElementById('root'));

这改变了从“向下滚动”到“向上滚动”当你scrollY位置是在100和上面的文字。

我在这里Codesandbox增加了一个例子：https://codesandbox.io/s/RgZYzJnxw

编辑：应避免在每个滚动更新状态的矫枉过正。只有在布尔值发生变化时才更新它。

来源

2017-06-18 11:34:00 glennreyes

谢谢格伦，工作的感谢，我修改它为我的代码incase任何人都有同样的问题 ''' –

基于滚动的切换类React JS

回答

相关问题