javascript - 转换后的内容使 html 卡顿到页面末尾

Question

我对 reactjs project of mine. 有疑问是关于手机版的。当您导航到任何图片并向下滚动到底部 - 到达最后时，当您尝试过度滚动时它会断断续续(尽管仅在移动设备上)。

我知道这是为什么(测试了我的去除效果)，但去除它并不是我想要的解决方案。 - 我使用偏移来创建某种应用 transform: translateY() 的视差。由于它移动了内容，我还需要更改其边距以避免不需要的间距:

class Gallery extends Component {

    state = {
        offsetColRight: 0,
    };

    componentDidMount() {
        window.addEventListener('scroll', this.changeOffset)
    }

    componentWillUnmount() {
        window.removeEventListener('scroll', this.changeOffset)
    }

    changeOffset = () => {
        const scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

        this.setState({offsetColRight: scroll * -1 / 5})
    };

    render() {
        const style = {
            transform: 'translateY(' + this.state.offsetColRight + 'px)',
            marginBottom: this.state.offsetColRight + 'px'
        };

        return(
            <div className="p-gallery">
                <div className="row">
                    <div className="col-6 px-0 p-animation">
                        <ColLeft images={this.props.gallery}/>
                    </div>
                    <div className="col-6 px-0 p-animation" style={style}>
                        <ColRight images={this.props.gallery}/>
                    </div>
                </div>
            </div>
        );
    }
}

如何防止它在移动设备上卡顿？

Answer 1

我猜这里的问题是由于您的事件处理程序滚动经常发生，这导致您的应用程序经常呈现。您可以先尝试添加限制以降低执行频率。

import _ from 'lodash';
changeOffset = _.throttle(() => {
    const scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

    this.setState({offsetColRight: scroll * -1 / 5})
}, 100);