div ID位于窗口顶部时的条件addEventListener

Question

I am trying to use addEventListener when the user scroll into view <div id="container"> . I have done so by scroll height but my attempts to addEventListener when <div> is on the top of the window.

handleHeaderStuck = () => {
    if (this.innerContainer.scrollTop <= 500 && this.state.isStuck === true) {
        this.setState({isStuck: false});
    }
    else if (this.innerContainer.scrollTop >= 500 && this.state.isStuck !== true) {
        this.setState({isStuck: true});
    }
}

This will setState when scrolled 500px .

How can I replace the condition of 500px to be set when the user is with id="container" as the top of the window? Also replace isStuck state to isStuckBottom when the user reaches the bottom of the div.

The full code is

constructor(props) {
    super(props)
    this.state = {
      isStuck: false,
    }
    this.handleHeaderStuck = this.handleHeaderStuck.bind(this)
  }

  innerContainer = null

  componentDidMount () {
    this.innerContainer.addEventListener("scroll", this.handleHeaderStuck);
  }

  componentWillUnmount () {
    this.innerContainer.removeEventListener("scroll", this.handleHeaderStuck);    
  }

  handleHeaderStuck = () => {
     if (this.innerContainer.scrollTop <= 500 && this.state.isStuck === true) {
        this.setState({isStuck: false});
     }
     else if (this.innerContainer.scrollTop >= 500 && this.state.isStuck !== true) {
        this.setState({isStuck: true});
     }
  }

Answer 1

  var atTop = false; var atBotton = false; document.addEventListener("scroll", e => { var elemInfo = document.getElementById("container").getClientRects()[0]; if (parseInt(elemInfo.bottom) >= window.innerHeight) { if (!atBottom){ console.log("I touche the bottom") document.getElementById("information").innerHTML = "mouse reached the bottom"; atBottom = true; } atTop = false; } else if (parseInt(elemInfo.top) <= 0) { if (!atTop) { console.log("Mouse at top") document.getElementById("information").innerHTML = "I touched the top"; atTop = true; } atBottom = false; } else { console.log("I touched the nothing") } }); 

 body { margin: 0px; padding: 0px; border: 0px; } .first, .bottom { width: 100%; height: 200px; background-color: Green; } #container { width: 100%; background-color: Yellow; margin: 0px; padding: 0px; border: 1 px solid black; height: 200px; } #infomation { font-size: 50px; } 

  <div class="example"> </div> <div id=container> <div id=information></div></div> <div class="bottom"> </div> 

Answer 2

You add an "scroll" onto document and check if the div is currently at 0 relative to the current viewport. To get the position relative to the current view of the user you can use getBoundingClientRect() . You can implement it in this way:

document.addEventListener("scroll", () => {
  div = document.querySelector("#container")
  if(div.getBoundingClientRect().top == 0) {
    //Do what you need to do here, this executes whenever the
    //top of the container is at the top of the screen.
  }
})