Que faire pour accéder à l'événement du gestionnaire de défilement? Impossible d'accéder à offsettop, à Scrolltop etc
3 Réponses :
Vous pouvez toujours accéder aux méthodes de fenêtre traditionnelles pour déterminer si vous avez atteint le bas. Voici votre code à jour et votre bac à sandbox: https://codesandbox.io/s/hardcore-poitras-04g3h
Nous pouvons utiliser l'état pour configurer l'apparence du composant lorsque nous atteignons le fond. P>
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class App extends React.Component {
state = {
endReached: false
};
handleScroll = () => {
if (
window.scrollY + window.innerHeight >= document.body.offsetHeight &&
!this.state.endReached
) {
this.setState({
endReached: true
});
} else {
this.setState({
endReached: false
});
}
};
componentDidMount() {
window.addEventListener("scroll", this.handleScroll);
}
render() {
return (
<div className={this.state.endReached ? "end-reached" : ""}>
<h1 style={{ height: "1000px" }}>Hello CodeSandbox</h1>
<h1>Hello end</h1>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Vous pouvez utiliser document.documentalement pour accéder à ScrollTop :
Essayez ce code.J'espère que cela fonctionnera.
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class App extends React.Component {
handleScroll = e => {
const winScroll =
document.body.scrollTop || document.documentElement.scrollTop;
console.log("scrolled=========>", winScroll);
};
componentDidMount() {
window.addEventListener("scroll", this.handleScroll);
}
componentWillUnmount() {
window.removeEventListener("scroll", this.listenToScroll);
}
render() {
return (
<div>
<h1 style={{ height: "1000px" }}>Hello CodeSandbox</h1>
<h1>Hello end</h1>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Que fait la sortie de la console? L'exemple CoDesandbox n'autorise pas le défilement.