移动端页面滑动事件穿透问题及其解决方案
生活随笔
收集整理的這篇文章主要介紹了
移动端页面滑动事件穿透问题及其解决方案
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
滑動事件穿透：
在一個可滾動的列表頁中打開彈窗，底部的頁面理論上是不可滾動的，但是當(dāng)滑動彈窗時，底部頁面會跟隨滾動，這就是所謂的頁面滾動穿透的問題。
解決方案一：
當(dāng)彈窗顯示時，在父元素上添加fix類來禁用滾動；當(dāng)彈窗隱藏時，移除fix類。
.fix{height: 100%;overflow: hidden;}
缺點：
當(dāng)彈出蒙層時，禁用了html和body的滾動條，滾動列表的滾動位置會丟失，會重置到?jīng)]有滾動的狀態(tài)，需要js進行還原。
$(function () {var scrollTop;$('.show').click(function () {scrollTop = document.documentElement.scrollTop;// 記錄scrollTop的值console.log(scrollTop);$('.model').show();$('.content').addClass('fix');});$('.hide').click(function () {$('.model').hide();$('.content').removeClass('fix');document.documentElement.scrollTop = scrollTop;// 設(shè)置scrollTop的值})})
demo完整代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>滾動穿透</title><meta content="width=device-width,initial-scale=1.0,user-scalable=no"><script src="jquery.js" type="text/javascript"></script><style>html,body{width: 100%;height:100%;}*{padding: 0;margin: 0;}.content{height: 3000px;background: #eea236;}.model{position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;height: 400px;width: 100%;background: #00b3ee;overflow: scroll;display: none;}.btn{position:fixed;top:0;left:0;height: 100px;width:200px;font-size: 40px;background: #000000;color: #fff;}.hide{left: 210px;}.fix{height: 100%;overflow: hidden;}</style> </head> <body> <div class="content" style="font-size: 30px;"><button class="btn show">顯示</button><button class="btn hide">隱藏</button><div class="model">長城（Great Wall），又稱萬里長城，是中國古代的軍事防御工程，是一道高大、堅固而連綿不斷的長垣，用以限隔敵騎的行動。長城不是一道單純孤立的城墻，而是以城墻為主體，同大量的城、障、亭、標相結(jié)合的防御體系。長城修筑的歷史可上溯到西周時期，發(fā)生在首都鎬京（今陜西西安）的著名的典故“烽火戲諸侯”就源于此。春秋戰(zhàn)國時期列國爭霸，互相防守，長城修筑進入第一個高潮，但此時修筑的長度都比較短。秦滅六國統(tǒng)一天下后，秦始皇連接和修繕戰(zhàn)國長城，始有萬里長城之稱[1] 。明朝是最后一個大修長城的朝代，今天人們所看到的長城多是此時修筑。[2]長城資源主要分布在河北、北京、天津、山西、陜西、甘肅、內(nèi)蒙古、黑龍江、吉林、遼寧、山東、河南、青海、寧夏、新疆等15個省區(qū)市。期中陜西省是中國長城資源最為豐富的省份，境內(nèi)長城長度達1838千米[3-10] 。根據(jù)文物和測繪部門的全國性長城資源調(diào)查結(jié)果，明長城總長度為8851.8千米，秦漢及早期長城超過1萬千米，總長超過2.1萬千米。[11]1961年3月4日，長城被國務(wù)院公布為第一批全國重點文物保護單位[12] 。1987年12月，長城被列入世界文化遺產(chǎn)。[13]</div> </div> </body> <script>$(function () {var scrollTop;$('.show').click(function () {scrollTop = document.documentElement.scrollTop;// 記錄scrollTop的值console.log(scrollTop);$('.model').show();$('.content').addClass('fix');});$('.hide').click(function () {$('.model').hide();$('.content').removeClass('fix');document.documentElement.scrollTop = scrollTop;// 設(shè)置scrollTop的值})}) </script> </html>
解決方案二：阻止touchmove默認事件
通過阻止彈窗的touchmove默認事件禁用滾動實現(xiàn)
源碼（基于方案一中demo的dom結(jié)構(gòu)）:
$(function () {
var modal = document.getElementsByClassName('modal')[0]; // 彈窗dom對象
modal.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
})
缺點：
彈窗中里不能有其它需要滾動的內(nèi)容，如大段文字需要固定高度，顯示滾動條也會被阻止。
解決方案三：設(shè)置 html,body{overflow:hidden;}
在PC和移動端都能禁止掉下層的滾動。
缺點：
網(wǎng)頁超出窗口部分不可滑動
總結(jié)：使用方案一。
總結(jié)
以上是生活随笔為你收集整理的移动端页面滑动事件穿透问题及其解决方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Telegram 限时朋友圈功能“故事”
- 下一篇： dnf多米娜怎么加点 地下城与勇士