当我向下滚动页面时,即使滚动后鼠标处于不同的位置,也不会触发Eventlistener'mousemove'

时间:2019-06-07 22:12:23

标签: javascript reactjs addeventlistener

这是我的代码

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”事件?

0 个答案:

没有答案