Safari在删除元素时自动滚动

在我添加删除元素时, 我想始终保持页面不滚动, 在Chrome以及Firefox中这都是没有问题的, 但是在Safari中, 就有问题了, 他页面会滚动到底部, 比如

```

export default class Test extends React.Component {

    constructor(props) {
        super(props);
        this.contentList = [
            <div key={1} style={{height: '3000px', backgroundColor: 'red'}}>will disappear</div>,
            <div key={2} style={{height: '3000px', backgroundColor: 'darkcyan'}}>content</div>,
            <div key={3} style={{height: '100px', backgroundColor: 'red'}}>will appear</div>
        ]
        this.state = {contentList: [...this.contentList.slice(0, 2)]}
    }

    componentDidMount() {
        setTimeout(() => {
            this.setState({contentList: [...this.contentList.slice(1, 3)]})
        }, 5000);
    }

    render() {
        const {contentList} = this.state;
        return (<>{contentList}</>)
    }
}

```

以上代码, 当我移动到深绿色的区域中部等待操作完成, Safari就会滚动到底部

 

我尝试过

1. body-scroll-lock 没用

2. 重新计算删除的元素跟添加的元素的高度, 结合现有的高度重新计算y值并且定位 - 过于复杂并且造成卡顿

3. 把要删除的元素分批次删除. 比如3000px分成三个1000px删除. - 也会造成各种问题, 不理想, 有时候单个元素过大就不行

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 你看下这篇博客吧, 应该有用👉 ：safari 音频播放问题

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 以帮助更多的人 ^-^