Условный addEventListener, когда div ID находится вверху окна - PullRequest
Новая
       13

Условный addEventListener, когда div ID находится вверху окна

0 голосов
/ 24 апреля 2018

Я пытаюсь использовать addEventListener, когда пользователь scroll в поле зрения <div id="container">. Я сделал это по высоте свитка, но мои попытки к addEventListener, когда <div> вверху окна. 

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

Это будет setState при прокрутке 500px.

Как я могу заменить условие 500px, которое должно быть установлено, когда пользователь имеет id="container" в качестве верхней части окна? Также замените состояние isStuck на isStuckBottom, когда пользователь достигнет нижней части деления.

Полный код 

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

Ответы [ 2 ]

0 голосов
/ 02 мая 2018

Вы добавляете "scroll" в document и проверяете, находится ли div в настоящее время в 0 относительно текущего окна просмотра.Чтобы получить позицию относительно текущего вида пользователя, вы можете использовать getBoundingClientRect().Вы можете реализовать это следующим образом: 

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.
  }
})
0 голосов
/ 01 мая 2018 

  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>
...