Estoy intentando diseñar algo similar a Fullpage.js en ReactJs, pero que al llegar al final de una sección con scrollbar, pase a la siguiente. Pero tengo algunos problemas con eventos del scroll. Debería sólo pasar a la función nextSection cuando haya terminado de desplazarle por la sección actual, pero a veces salta a la siguiente sin haber terminado de desplazarse.
La primera condición de handleScrollWithBar consulta si la sección tiene scrollbar. La segunda condición consulta si ha llegado al final de la sección actual para pasar a la siguiente
Como decía anteriormente, a veces salta a la siguiente sección, pero sin pasar por la función nextSection, es decir se desplaza por sí solo. Quisiera saber si puedo hacer que sólo vaya a la siguiente sección por medio de la función.
handleScrollWithBar = (e) => {
if(e.target.scrollHeight > e.target.offsetHeight){
if(e.target.offsetHeight + e.target.scrollTop == e.target.scrollHeight){
let scrolled = update(this.state.scrolled, {$merge: {isScrolled: false }});
this.setState({scrolled});
this.nextSection();
}
}
};
nextSection = () => {
if(!this.state.scrolled.isScrolled){
var nxtSection = this.state.heightScreen + 100;
this.setState({ heightScreen: nxtSection });
var newCss = document.createElement("style");
newCss.type = "text/css";
newCss.innerHTML = ".page-home { transform: translate3d(0px, -"+nxtSection+"vh, 0px); }";
document.body.appendChild(newCss);
}
};