基于滚动React JS切换类

Question

我正在使用bootstrap 4导航栏,并希望在ig 400px向下向下滚动后更改背景颜色.我正在查看反应文档并找到了一个onScroll但却找不到那么多信息.到目前为止我有

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

我并没有真正设置内联样式

  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;

Answer 1

添加滚动侦听器的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及以上时,这会将文本从"向下滚动"更改为"向上滚动".

编辑:应该避免在每个滚动上更新状态的过度杀伤.仅在布尔值更改时更新它.

Answer 2

对于那些在2019年阅读此问题的人，我采取了@glennreyes的答案并使用React Hooks重写了它：

  const [scroll, setScroll] = useState(0)

  useEffect(() => {
    document.addEventListener("scroll", () => {
      const scrollCheck = window.scrollY < 100
      if (scrollCheck !== scroll) {
        setScroll(scrollCheck)
      }
    })
  })

请记住，useState具有两个元素的数组，首先是状态对象，其次是更新它的函数。

大致而言，useEffect可帮助我们替换componentDidmount，当前编写的函数不会进行任何清理，因为在这种情况下没有必要。

如果发现清理非常必要，则可以在useEffect内部返回一个函数。

您可以在这里全面阅读。

更新：

如果你们想使其模块化甚至进行清理，则可以执行以下操作：

1. 创建一个自定义钩子，如下所示；

   import { useState, useEffect } from "react"
   
   export const useScrollHandler = () => {
   // setting initial value to true
   const [scroll, setScroll] = useState(1)
   
   // running on mount
   useEffect(() => {
     const onScroll = () => {
       const scrollCheck = window.scrollY < 10
       if (scrollCheck !== scroll) {
         setScroll(scrollCheck)
       }
     }
   
   // setting the event handler from web API
   document.addEventListener("scroll", onScroll)
   
   // cleaning up from the web API
    return () => {
      document.removeEventListener("scroll", onScroll)
     }
   }, [scroll, setScroll])
   
   return scroll
   
   }
   

2. 在找到的任何组件中调用它：

   const component = () => {
   
   // calling our custom hook
   const scroll = useScrollHandler()
   
   ....... rest of your code
   
   }
   

Answer 3

 const [scroll, setScroll] = useState(false);

 useEffect(() => {
   window.addEventListener("scroll", () => {
     setScroll(window.scrollY > specify_height_you_want_to_change_after_here);
   });
 }, []); 

然后你可以根据滚动改变你的班级或任何东西。

<nav className={scroll ? "bg-black" : "bg-white"}>...</nav>

Answer 4

更好了

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

class App extends React.Component {
    constructor(props) {
    super(props);

    this.state = {
      isTop: true
    };
    this.onScroll = this.onScroll.bind(this);
  }

  componentDidMount() {
    document.addEventListener('scroll', () => {
      const isTop = window.scrollY < 100;
      if (isTop !== this.state.isTop) {
        this.onScroll(isTop);
      }
    });
  }

  onScroll(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'));