移动端页面滑动事件穿透问题及其解决方案
生活随笔
收集整理的這篇文章主要介紹了
移动端页面滑动事件穿透问题及其解决方案
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
滑動事件穿透：
在一個可滾動的列表頁中打開彈窗，底部的頁面理論上是不可滾動的，但是當滑動彈窗時，底部頁面會跟隨滾動，這就是所謂的頁面滾動穿透的問題。
解決方案一：
當彈窗顯示時，在父元素上添加fix類來禁用滾動；當彈窗隱藏時，移除fix類。
.fix{height: 100%;overflow: hidden;}
缺點：
當彈出蒙層時，禁用了html和body的滾動條，滾動列表的滾動位置會丟失，會重置到沒有滾動的狀態，需要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;// 設置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），又稱萬里長城，是中國古代的軍事防御工程，是一道高大、堅固而連綿不斷的長垣，用以限隔敵騎的行動。長城不是一道單純孤立的城墻，而是以城墻為主體，同大量的城、障、亭、標相結合的防御體系。長城修筑的歷史可上溯到西周時期，發生在首都鎬京（今陜西西安）的著名的典故“烽火戲諸侯”就源于此。春秋戰國時期列國爭霸，互相防守，長城修筑進入第一個高潮，但此時修筑的長度都比較短。秦滅六國統一天下后，秦始皇連接和修繕戰國長城，始有萬里長城之稱[1] 。明朝是最后一個大修長城的朝代，今天人們所看到的長城多是此時修筑。[2]長城資源主要分布在河北、北京、天津、山西、陜西、甘肅、內蒙古、黑龍江、吉林、遼寧、山東、河南、青海、寧夏、新疆等15個省區市。期中陜西省是中國長城資源最為豐富的省份，境內長城長度達1838千米[3-10] 。根據文物和測繪部門的全國性長城資源調查結果，明長城總長度為8851.8千米，秦漢及早期長城超過1萬千米，總長超過2.1萬千米。[11]1961年3月4日，長城被國務院公布為第一批全國重點文物保護單位[12] 。1987年12月，長城被列入世界文化遺產。[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;// 設置scrollTop的值})}) </script> </html>
解決方案二：阻止touchmove默認事件
通過阻止彈窗的touchmove默認事件禁用滾動實現
源碼（基于方案一中demo的dom結構）:
$(function () {
var modal = document.getElementsByClassName('modal')[0]; // 彈窗dom對象
modal.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
})
缺點：
彈窗中里不能有其它需要滾動的內容，如大段文字需要固定高度，顯示滾動條也會被阻止。
解決方案三：設置 html,body{overflow:hidden;}
在PC和移動端都能禁止掉下層的滾動。
缺點：
網頁超出窗口部分不可滑動
總結：使用方案一。
總結
以上是生活随笔為你收集整理的移动端页面滑动事件穿透问题及其解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Telegram 限时朋友圈功能“故事”
- 下一篇： 使用事件委托降低重复的事件绑定,从而降低