ページにジャンプするとモニターのスクロールバーが0にリセット、つまり先頭に戻ります。

vue プロジェクトページの開発中に、ページの途中までスライドして他のページにジャンプすると、ページが上から表示されない問題が発生することがありますが、その解決方法は次のとおりです。

(追記: ここに落とし穴があります。スクロール位置 = 0 を直接設定すると効果がなくなる可能性があります。その場合は次の方法を使用できます。個人的なテストは効果的です)

1. 変数scrollElをストアに保存して、ジャンプ前のページのスライド位置を記録します

   computed: {
    
    
   // 同步更新store存的scrollEl记录滚动位置
        scrollEl () {
    
    
            return this.$store.state.scrollEl
        }
    },
    mounted () {
    
    
         // 监听滚动条
        window.addEventListener('scroll', this.scrollMethod, true)
        // 初始化一系列函数
        this.init()
    }, 
    destroyed() {
    
    
        // 销毁时，删除监听滚动事件，否则其他.vue文件也会受影响
        window.removeEventListener('scroll', this.scrollMethod)
    },

2. 現在のページから他のページにジャンプする必要がある場合に使用します。

// 先把滚动条回归到顶部，解决跳转至详情，页面未从顶部展示问题 
this.$store.state.scrollEl.target.scrollTop = 0

3. 拡張
Keepalive の場合、ジャンプ前に記録された位置を復元したい場合、ジャンプ前の最後のスクロール位置を記録する変数を設定し、アクティブ化されたストアに保存されているスクロール位置に逆の値を割り当てることができます。 。

data （） {
    
    
	return {
    
    
		currentScroll： 0
	}
}


activated () {
    
    
        this.$store.state.scrollEl.target.scrollTop = this.currentScroll
        
        // 监听滚动条
        window.addEventListener('scroll', this.scrollMethod, true)
    },
methods： {
    
    
	// 跳转前，记录最后的滚动位置
	this.currentScroll = this.$store.state.scrollEl.target.scrollTop
}

終わり~
記録された質問がお役に立てば幸いです、チャープ~