相信很多寫移動端的朋友會遇到這個問題，我也遇到了，之後就辛辛苦苦的在網上找解決辦法，下面我大概提一下我在網上看到的幾種辦法，行不行的通呢？本人就親測了下。本人學的還不是太深，如果有什麼不對的地方或者有好的解決辦法，也請告知。
測試結果：chrome手機模擬器還真可以，but到了我的安卓手機上，撲街了···測試結果：效果是有了，彈出層內可以滾動，底層不滾動了，but當彈出層出現，底層body會回到頁面頂部，這個並不是我想要的。所以此方法xx。以下**基於jquery.
var top = 0;//給top變數乙個初始值，以便下方賦值並引用。
$('.tan').click(function());
$('.close').click(function());
第一種：div
第二種：div
測試結果：和第二個方法結果差不多，效果是有了，但是在ipone手機上定位層上下滑動效果不佳。以下是我測試頁面的全部**：
charset="utf-8">
name="format-detection"
content="telephone=no">
name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
testtitle>
input
ulli
ulli
.hong
.main
#tan
#tan
ulli
.bgstyle>
head>
遇見，是琥珀流年中如雲朵般美麗的詩篇，沒有格律，沒有韻腳，讀之，卻朗朗上口，百讀不厭。人生中最難忘的，就是一次次鐫刻在心靈深處的相遇。靜默獨處時，傷心落淚時，細細品味，點點滴滴的美好，足可以潤澤晦暗枯燥的心靈。
佛曰：前生五百次的回眸才換得今生的一次擦肩而過。那麼，我們的相遇、相知是前生多少次回眸才修得的緣分呢？前生太虛渺，不可知；來生有太渺遠，不可測；能把握的，唯有今生。所以，珍惜今生所有的遇見。
一花一天堂，一草一世界，一樹一菩提，一土一如來，一方一淨土，一笑一塵緣。想來，所有的遇見，都是前世今生該有的緣分。
「同是天涯淪落人，相逢何必曾相識」是萍水相逢卻又惺惺相惜的緣分， 「桃花潭水深千尺，不及汪倫送我情」是高山流水、情同手足的緣分,「曾經滄海難為水，除卻巫山不是雲」是相識相知、執手紅塵的緣分。
席慕蓉曾說：如何讓你遇見我，在我最美麗的時刻，為這，我已在佛前求了五百年，求他讓我們結一段塵緣。所以，不管如何，我珍惜所有的遇見。無論我們是素昧平生，還是相識相知。
type="button"
value="點我試一下"/>
我珍惜生活中風雨同舟的朋友。千金易得，知己難求。朋友的真情，是人生千金難買的珍寶。也許，他（她）不會錦上添花，但是他（她）會雪中送炭。他（她）不會甜言蜜語，但是他（她）會推心置腹。傷心時，一句溫馨的問候；孤獨時，一次真心的陪伴；困難時，乙份無私地援助：這些，都是穿透紅塵冷漠的暖。所以，我很珍惜，這乙份閃爍在我生命中的如陽光溫暖的緣。
我珍惜和我牽手紅塵的愛人。不管他前生是不是在三生石畔刻下愛情的誓言，也不管他是不是前生將我掩埋的那個人，我只知道，他是我的親人。我們除了要平平淡淡的共度光陰，還要共同撐起家庭的未來，無論多少的風風雨雨，我們要一起面對，一起承擔。我珍惜，這乙份鑲嵌在我生命中的如玉溫潤的緣。
如果，今生還有一種特殊的遇見：彼此相愛過，卻無緣牽手。那麼，就把這份愛安放在心靈一隅，於夜深人靜時，於靜默獨處時，在內心深處幽幽綻放吧。縱使不能在一起，相愛過，也是人生旅途最美的一段珍藏。如果，不能繼續做朋友，默默地祝福對方也好。如果不能祝福對方，各安天涯一方也好。總之，不要反目為仇，不要辜負了曾經的美好，和今生相遇的緣分。
不懂得珍惜的人，辜負了紅塵中遇見的情誼，就會成為情感上的孤家寡人，就會離快樂越來越遠。
遇見，是一縷清風，舒爽怡人；遇見，是一束陽光，溫暖明媚；遇見，是一闋詩詞，雋永靈動；遇見，是一曲清音，餘音繞梁。今生相遇的人，來生不一定相見。請珍惜，今生所有的遇見！
div>
div>
class="main">
id="tan">
1li>
2li>
3li>
4li>
5li>
6li>
7li>
8li>
9li>
10li>
1li>
2li>
1li>
2li>
1li>
2li>
1li>
2li>
1li>
2li>
1li>
2li>
ul>
div>
div>
body>
src="js/jquery-2.1.1.min.js">
script>
src="js/iscroll.js">
script>
html>
$(function
(), false);//彈出層的背景層阻止預設滑動事件
new iscroll('#tan');//
});$(".main").click(function
());
});script>
此方法是沒有阻止body的滾動，而是阻止了傳遞滑動事件的發生。
測試結果：完美！-webkit-overflow-scrolling : touch; //可以讓頁面在native端滾動時模擬原生的彈性滾動效果二、三種出現的問題就解決了，夠我高興好久了。
因為對於這個了解的不多，就查了一下是否會帶來什麼不良影響，以下是網上看到的有人遇到的問題並如何解決的：
1.2.
3.總結下來，使用這個需要注意的問題有以下幾個方面
1.會影響層級，需處理好層級關係
2.不要將此屬性加在body上，否則會有部分瀏覽器白屏，需加在滾動元素上
3.設定scrolltop值時需注意此屬性的影響
4.建立了帶有硬體加速的系統級控制項，所以效率很高。但是相對耗更多記憶體，最好在產生了非常大面積的overflow時才應用。
因為也是從網上找的，所以並不完全保證其準確性，大家如果有用到的根據自己的實際情況採取相應的措施吧。
ok，回到這篇博文的主題，親測了幾種方法之後後三種都是可以實現效果的，所以結果還是不錯的，至於使用哪種更好，誰需要用自己去考慮吧······ (^o^)/
移動端彈出層滾動穿透問題總結
移動端彈出層 簡稱layer 時，層內有大量文字需要滾動，但是背景層 簡稱body 會隨著layer的滾動而滾動，使用者體驗較差。參考了網上的一些資料，總結解決方案如下 scrollfix scrollfix body 彈出層前 防止body層向下滾動後出現內容顯示不全的問題 html,body a...
前端 移動端彈窗彈出後禁止頁面滾動
在做專案時，我碰到了乙個問題，當浮層彈出後，浮層後面的內容仍可以滾動。首先我們要明確，當浮層彈出後，我們操作的是body的滾動條，而不是其他div。body出現滾動條。這種問題是應該避免，我認為合理的頁面布局不應該讓body出現滾動條。應該將內容放在div中，讓div出現滾動條，這樣可以很方便的處理...
彈出層完美禁止頁面滾動
頁面中經常會遇到彈出層的部件，當彈出層啟用時覆蓋整個頁面，且背景部分不能滾動。實現起來有以下要點 以下是實踐 codepen 為了讓徹底禁止滾動，還可以在mousewheel和touchmove事件 分別對應pc和移動端 中呼叫preventdefault 方法 function forbidscr...