Question

当您在div元素上方滚动100个像素或更少时，我希望div元素获得“ showtext”类。当它高于100像素或更多时，它具有“隐藏”类。

我正在尝试使用ref来访问div元素，并使用一种名为showText的方法来检查并查看何时滚动到该div元素上方100像素或更小，我为此使用了scrollTop。

然后，我使用componentDidMount添加滚动的窗口事件侦听器，并调用我的showText方法。

我对此并不陌生，所以我确定这里有错误，可能还有错误的代码。但是任何帮助，我们都感激不尽！

import React, {Component} from 'react';

class SlideIn extends Component{

    state={
        showTexts: false,
    }

    showText=()=>{
        const node= this.showTextRef;
        if(node.scollTop<=100)
        this.setState({
            showTexts: true
        })
    }



    componentDidMount(){
        window.addEventListener('scroll', this.showText() )
    }



    render(){
        const intro= document.querySelector('.intro')
        return(
            <div classname={this.state.showTexts ? 'showText' : 'hidden'} ref={node =>this.showTextRef = node}>
             {window.addEventListener('scroll', this.showText)}


                <h1>You did it!</h1> 
            </div>
        )
    }
}

export default SlideIn

我已经尝试在窗口滚动事件中使用this.showText，并且正如您在this.showText（）上方看到的那样，都没有用。我试图在showText方法的div ref上使用当前属性，这引发了一个错误，提示scrollTop无法定义null属性。

同样，我是新手，从未以这种方式添加窗口事件侦听器，也从未使用过scrollTop。

感谢您的帮助！

Answer 1

当附加事件侦听器时，必须将函数作为参数传递。添加事件监听器后，您将直接调用该函数。

本质上，您需要更改：

\d+

收件人：

componentDidMount(){
    window.addEventListener('scroll', this.showText() )
}

在滚动侦听器中，您应检查componentDidMount(){ window.addEventListener('scroll', this.showText) }（这是执行滚动的元素）的滚动位置：

window

此外，您还将事件监听器附加到showText = () => { if (window.scrollY <= 100) { this.setState({ showTexts: true }); } }方法中。 render方法应仅包含呈现元素的逻辑。

Answer 2

将传递函数作为参数，例如

window.addEventListener('scroll', this.showText)

并将其从退货中删除。

然后您只需要在函数中执行此操作

if(window.scrollY<=100)
    this.setState({
        showTexts: true
    })

在这里使用您的div位置

Answer 3

您需要使用getBoundingCLientRect（）来获取滚动位置。 window.addEventListener("scroll", this.showText);您需要传递this.showText而不是调用它。类名有严重错误。

showText = () => {
    const node = this.showTextRef;
    const {
        y = 0
    } = (node && node.getBoundingClientRect()) || {};

    this.setState({
        showTexts: y <= 100
    });
};

componentDidMount() {
    window.addEventListener("scroll", this.showText);
}

render() {
    const intro = document.querySelector(".intro");
    return (
       <div
          className={this.state.showTexts ? "showText" : "hidden"}
          ref={node => (this.showTextRef = node)}
       >
          <h1>You did it!</h1>
       </div>
   );
}

工作示例的条件框：https://codesandbox.io/s/intelligent-shannon-1p6sp

Answer 4

我整理了一个工作样本供您参考，这里是链接：https://codesandbox.io/embed/summer-forest-cksfh

您的代码中有几点要指出：

componentDidMount(){
        window.addEventListener('scroll', this.showText() )
    }

就像mgracia提到的那样，使用this.showText()意味着您正在直接调用该函数。正确的方法就是使用this.showText。

在showText函数中，您必须确定用户从文档的顶部滚动了多远。正如它被称为：

const top = window.pageYOffset || document.documentElement.scrollTop;

现在可以安全地检查逻辑并根据所需的值设置状态，在这里我将其设置为：

this.setState({
  showTexts: top <= 100
})

在您的componentDidMount中，您必须调用一次showText才能触发第一次页面加载，否则，当您重新加载页面时，它不会触发该功能。

希望获得帮助

完整代码：

class SlideIn extends Component {
  state = {
    showTexts: false,
  }

  showText = () => {
    // get how many px we've scrolled
    const top = window.pageYOffset || document.documentElement.scrollTop;
    this.setState({
      showTexts: top <= 100
    })
  }

  componentDidMount() {
    window.addEventListener('scroll', this.showText)
    this.showText();
  }

  render() {
    return (
      <div className={`box ${this.state.showTexts ? 'visible' : 'hidden'}`}
        ref={node => this.showTextRef = node}>
      
        <h1>You did it!</h1>
      </div>
    )
  }
}

.App {
  font-family: sans-serif;
  text-align: center;
  height: 2500px;
}

.box {
  width: 100px;
  height: 100px;
  background: blue;
  position: fixed;
  left: 10px;
  top: 10px;
  z-index: 10;
}

.visible {
  display: block;
}

.hidden {
  display: none;
}

如何在React中滚动更改此元素类？

4 个答案: