Условный addEventListener, когда идентификатор div находится в верхней части окна
Я пытаюсь использовать 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, когда пользователь достигает нижней части div.
Полный код
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});
}
}
Спасибо @MaxBaldwin. Я проверю это.
Комментарий @Andreas действителен. Я собирался упомянуть getBoundingClientRect, но кто-то уже решил эту проблему в React. Зачем решать самому?
@MaxBaldwin. Проблема, которую я обнаружил с react-visibility-sensor, заключается в том, что нет возможности заставить датчик реагировать на то, как div достигает 0px в окне. Знаете ли вы, как этого можно достичь с помощью этого решения?
Посмотрите на пример в отправленных мною документах. Вы оборачиваете свой компонент датчиком видимости, а затем передаете датчику видимости функцию его опоры onChange. Эта функция получает isVisible в качестве параметра. Если под 0px вы имеете в виду вход в область просмотра, тогда isVisible переходит из false в true. Если вам нужен пример, дайте мне знать, и я напишу ответ, когда вернусь домой
Спасибо за ответ @MaxBaldwin. Да, эта часть работает без проблем. Пытаюсь найти способ определить, когда верхняя часть контейнера div находится на 0 пикселей.
@ Даррен, посмотрим, поможет ли это? jsfiddle.net/tarunlalwani/xmfxpmf5
@Darren «верх контейнера div равен верхнему 0 пикселей». Что ты имеешь в виду? На scrollTop 0?
Когда верхняя часть div достигает верха области просмотра.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
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.info("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.info("Mouse at top")
document.getElementById("information").innerHTML = "I touched the top";
atTop = true;
}
atBottom = false;
} else {
console.info("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>Вы добавляете "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.
}
})