这是我的代码
componentDidMount() {
document
.getElementsByClassName('landingScreen')[0]
.addEventListener('mousemove', this.updateDisplay, false);
document.addEventListener('scroll', this.isScrolling);
setTimeout(() => {
if (window.scrollY < 200) {
this.setState({ opacity: 1 });
}
}, 1000);
}
componentWillUnmount() {
document
.getElementsByClassName('landingScreen')[0]
.removeEventListener('mousemove', this.updateDisplay, false);
}
updateDisplay = event => {
const procentWidth = Math.round((event.pageX / this.state.width) * 100) - 50;
const procentHeight = Math.round((event.pageY / this.state.height) * 100 - 50);
const transform = `skew(${procentWidth / 5}deg,${procentHeight / 5}deg)`;
const textShadow = `${procentWidth / 1}px ${procentHeight / 1}px #5BDC94`;
const textShadow1 = `${procentWidth / 1}px ${procentHeight / 1}px #EDF5E0`;
const transform1 = `skew(${-procentWidth / 5}deg,${-procentHeight / 5}deg)`;
this.setState({ transform, textShadow, textShadow1, transform1 });
};
isScrolling = event => {
console.log(event);
if (window.scrollY >= 200) {
this.setState({ opacity: 0 });
}
if (window.scrollY <= 200) {
this.setState({ opacity: 1 });
}
};
我根据鼠标所在的位置触发一个转换偏斜,并且当我在光标周围移动时它可以正常工作,但是当我滚动并因此光标更改位置时,不会触发“ mousemove”。我试图为滚动添加一个事件侦听器,但是在那里我无法访问这些值event.pageX和event.pageY。你们在滚动后是否有任何技巧来触发“ mousemove”事件?