Vue項(xiàng)目移動(dòng)端滾動(dòng)穿透問題的實(shí)現(xiàn)
概述
今天在做 Vue 移動(dòng)端項(xiàng)目的時(shí)候遇到了滾動(dòng)穿透問題,在網(wǎng)上查資料后,選取了我覺得最好的方法,記錄下來供以后開發(fā)時(shí)參考,相信對(duì)其他人也有用。
上層無需滾動(dòng)
如果上層無需滾動(dòng)的話,直接屏蔽上層的 touchmove 事件即可。示例如下:
<div @touchmove.prevent>我是里面的內(nèi)容</div>
上層需要滾動(dòng)
如果上層需要滾動(dòng)的話,那么固定的時(shí)候先獲取 body 的滑動(dòng)距離,然后用 fixed 固定,用 top 模擬滾動(dòng)距離;不固定的時(shí)候用獲取 top 的值,然后讓 body 滾動(dòng)到之前的地方即可。示例如下:
<template> <div @click='handleHambergerClick'></div></template><script>export default { name: ’BaseHeaderMobile’, data() { return { isHeaderVisible: false, }; }, methods: { handleHambergerClick() { // hack: 滑動(dòng)穿透問題 if (!this.isHeaderVisible) { this.lockBody(); } else { this.resetBody(); } this.isHeaderVisible = !this.isHeaderVisible; }, lockBody() { const { body } = document; const scrollTop = document.body.scrollTop || document.documentElement.scrollTop; body.style.position = ’fixed’; body.style.width = ’100%’; body.style.top = `-${scrollTop}px`; }, resetBody() { const { body } = document; const { top } = body.style; body.style.position = ’’; body.style.width = ’’; body.style.top = ’’; document.body.scrollTop = -parseInt(top, 10); document.documentElement.scrollTop = -parseInt(top, 10); }, },};</script>
到此這篇關(guān)于Vue項(xiàng)目移動(dòng)端滾動(dòng)穿透問題的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue 移動(dòng)端滾動(dòng)穿透內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. PHP laravel實(shí)現(xiàn)導(dǎo)出PDF功能2. python中文本字符處理的簡(jiǎn)單方法記錄3. JS中6個(gè)對(duì)象數(shù)組去重的方法4. Python-openpyxl表格讀取寫入的案例詳解5. 使用Blazor框架實(shí)現(xiàn)在前端瀏覽器中導(dǎo)入和導(dǎo)出Excel6. 資深程序員:給Python軟件開發(fā)測(cè)試的25個(gè)忠告!7. vscode運(yùn)行php報(bào)錯(cuò)php?not?found解決辦法8. ASP基礎(chǔ)知識(shí)Command對(duì)象講解9. JavaScript實(shí)現(xiàn)留言板實(shí)戰(zhàn)案例10. Python使用Selenium自動(dòng)進(jìn)行百度搜索的實(shí)現(xiàn)

網(wǎng)公網(wǎng)安備