- 頁(yè)面使用overflow:auto不會(huì)進(jìn)行影響
- 頁(yè)面滾動(dòng)的兩種情況
1梨水、首頁(yè)滑動(dòng)到一定的距離玻淑，點(diǎn)擊跳轉(zhuǎn)頁(yè)面，點(diǎn)擊返回鍵（不是重新跳轉(zhuǎn)過(guò)來(lái)的奧），首頁(yè)的滾動(dòng)距離還是之前滾動(dòng)的距離梳侨，不變
const pageEle = ref(null);
const data = reactive({
scrollTop: 0,
});
onMounted(() => {
// 首頁(yè)滾動(dòng)到當(dāng)前的某個(gè)位置，跳轉(zhuǎn)頁(yè)面在返回后還在當(dāng)前的位置
pageEle.value.addEventListener('scroll', (e) => {
// console.log('滾動(dòng)高度', e.target.scrollTop);
data.scrollTop = e.target.scrollTop;
});
router.beforeEach((to, from, next) => {
console.log('from', from);
if (from.path) {
setTimeout(() => {
pageEle.value.scrollTop = data.scrollTop;
}, 0);
}
next();
});
});
onUnmounted(() => {
pageEle.value.removeEventListener('scroll', (e) => {
data.scrollTop = e.target.scrollTop;
});
});
- pageEle 是當(dāng)前首頁(yè)的跟標(biāo)簽隐岛，然后監(jiān)聽滾動(dòng)的距離進(jìn)行保存猫妙，返回的時(shí)候進(jìn)行滾動(dòng)
2、首頁(yè)點(diǎn)擊跳轉(zhuǎn)頁(yè)面滾動(dòng)的特定的某個(gè)元素
const productEle = ref(null);
const product3 = ref(null);
watch(
() => route.query,
(newV) => {
console.log('new', newV);
if (newV.hasOwnProperty('num')) {
data.num = newV.num;
console.log(data.num, 'num');
} else if (newV.hasOwnProperty('type')) {
//首頁(yè)點(diǎn)擊后頁(yè)面滾動(dòng)到某一個(gè)地方
data.num = 0;
if (newV.type == 3) {
setTimeout(() => {
productEle.value.scrollTop = product3.value.offsetTop - 50;
}, 50);
}
}
},
{
deep: true,
immediate: true,
}
);
首先是當(dāng)前頁(yè)面的根標(biāo)簽ref進(jìn)行獲取聚凹，當(dāng)前要滾動(dòng)的元素標(biāo)簽ref進(jìn)行獲取割坠，然后使用watch進(jìn)行監(jiān)聽（要使用深度監(jiān)聽，第一次跳轉(zhuǎn)過(guò)來(lái)不會(huì)觸發(fā)妒牙，加定時(shí)器是需要ref獲取元素的高度彼哼，否則獲取不到）
目前遇到的兩個(gè)，希望可以幫助到你們湘今！
