转换后的内容会使 html 卡顿到达页面末尾

Question

我对我的一个reactjs项目有问题。这是关于移动版本。当您导航到任何图片并向下滚动到底部时 - 到达末尾时，当您尝试过度滚动时它会卡顿(尽管仅在移动设备上(。

我知道为什么会这样(测试了我的去除效果(，但删除它不是我想要的解决方案。 - 我使用偏移来创建某种应用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);