javascript - 如何修复滚动时显示 div( react )

Question

在我设置了一些 div 在滚动后显示，结果是当页面打开(或重新加载)时 div 没有隐藏

我试过- componentWillMount，和- componentDidMount对于生命周期，但我得到了相同的结果

这是代码

1. 启动状态

constructor(props){
    super(props);
    this.state={
      isHide:false,
    };
    this.hideBar = this.hideBar.bind(this)
  }

1. 实现功能

 hideBar(){
    let {isHide} = this.state;
    window.scrollY < 300 && this.prev ?
    !isHide && this.setState({isHide:true})
    :
    isHide && this.setState({isHide:false})
    this.prev = window.scrollY;
  }

  componentWillMount(){
      window.addEventListener('scroll',this.hideBar);
  }
  componentWillUnmount(){
       window.removeEventListener('scroll',this.hideBar);
  }

1. 调用函数

render() {
    let classHide=this.state.isHide?"newsletterhide":""
      return (
        <div className={classHide+"newsletter-container"}>
          <div className="newsletter-details">
            <h3 style={{margin:0, fontSize:"0.9em"}}>
              Get latest updates in web technologies
            </h3>
            <p className="p-newsletter">
              I write articles related to web technologies, such as design trends, development tools, UI/UX case studies and reviews, and more. Sign up to my newsletter to get them all.
            </p>
          </div>
          <div className="newsletter-form">
            <input 
              name="email" 
              type="email" 
              placeholder="Email address" 
              className="newsletter-input"
            />
            <button className="newsletter-button">
              Count me in!
            </button>
          </div>
        </div>
    );
  }

感谢您的帮助!希望其他需要它的人觉得它有用。

Answer 1

据我了解，您希望在用户向下滚动页面时显示订阅时事通讯框。你为什么不写:

hideBar() {
  this.setState({
    isHidden: window.scrollY < 300
  });
}

并在开始时将 isHidden 设置为 true 应该可以解决您的问题。如果没有，则在 componentDidMount 调用 hideBar 方法。

此外，我建议您在用户浏览网站一段时间后显示时事通讯框；例如在他/她阅读文章 15 秒后显示。