Descargo de responsabilidad - En el momento de escribir yo era sólo la orientación del navegador Chrome.
Cuando el usuario se desplaza de un DOM de desplazamiento evento es disparado, un evento que está integrado en el navegador por defecto. Reaccionan tiene su propio método, onScroll, que puede ser llamado en cualquier componente cuando el evento scroll, es despedido. El uso de este onScroll método podemos llamar a una función como resultado de un usuario de desplazamiento.
Ejemplo;
<SomeComponent onScroll={someMeothod} />
Como con cualquier DOM evento, un evento que se ha creado el objeto con las propiedades que pueden proporcionar información útil sobre el evento y el elemento de dicho evento está relacionado con demasiado. Un evento de desplazamiento es despedido por cada píxel que un usuario se desplaza. En este caso, sólo estamos interesados en identificar el momento en que el usuario ha llegado a la final del elemento primario que contiene nuestro contenido.
El cálculo cuando el usuario se ha desplazado a la final de un contenedor
Añadir un onScroll método de elemento que contiene el contenido que llama a una función en la clase de componentes:
<div className="content-container" onScroll={this.handleScroll}>
// Your content
</div>
Luego de crear el handleScroll función para manejar el evento scroll:
class MyComponent extends React.Component {
handleScroll = e => {
let element = e.target
if (element.scrollHeight - element.scrollTop === element.clientHeight) {
// do something at end of scroll
}
}
render() {
return (
<div className="content-container" onScroll={this.handleScroll}>
// Your content
</div>
)
}
}
Vamos a romper lo que está sucediendo en el handleScroll método para hacer las cosas un poco más claro...
e - esto se corresponde con el evento en sí. Es un objeto que es creado por el navegador con las propiedades relacionadas con el evento scroll que estamos trabajando.
vamos elemento = e.objetivo - lo que nos permite encontrar el elemento que distribuye el caso de uso (e.de destino) y asignar a la variable que podemos utilizar en el resto del código.
Ahora que nuestro código) sabe que es el elemento se desplaza y se han asignado a una variable en nuestros métodos de alcance, podemos acceder a las propiedades de ese elemento dado por el navegador, y calcular si el usuario ha llegado a la final.
elemento.scrollHeight - esta es la altura en píxeles de los elementos de contenido, incluyendo contenido no es visible en la pantalla debido a css overflow.
elemento.scrollTop - la altura en píxeles de que un elemento del contenido que se desplaza verticalmente.
elemento.clientHeight - la altura en píxeles de la desplazable parte del elemento.
Utilizando las propiedades anteriores, se puede calcular si el usuario ha desplazado a la parte inferior del elemento mediante la comparación de la suma negativa de la scrollHeight y scrollTop a la clientHeight. Si son el mismo, el usuario se ha desplazado a la parte inferior del elemento. Envolviendo esta en un if declaración por lo tanto, podemos asegurar que nuestra función dentro de la declaración de si el ámbito de aplicación sólo se ejecuta cuando el usuario ha llegado a la final de la div y nuestro if se cumple la condición.
