Question

我将某些div设置为滚动显示后，结果是打开页面（或重新加载）时div没有隐藏

我试图让 -componentWillMount，和 -componentDidMount 在生命周期中，但是我得到了相同的结果

这是代码

启动状态

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

启用功能

 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);
  }

调用函数

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应该可以解决您的问题。如果没有，请在hideBar处调用componentDidMount方法。

此外，我建议您在用户花一些时间浏览网站后显示新闻稿框；例如在他/她阅读文章15秒后显示。

Answer 2

假设问题是在重新加载期间存在页面偏移，并且您的意图是然后显示div，

componentDidMount() {
  if(window.pageYOffset) this.setState({ isHide: false, });
}

如何修复滚动显示div（反应）

2 个答案: