前端入坑紀(jì) 44
如題舰讹，取名不易，請原諒這一長條題名闪朱！這是個不大不小的效果月匣，原先的處理是在懸浮層上滑動時，不觸發(fā)下面的body移動奋姿。
小伙伴反應(yīng)不支持ios锄开，現(xiàn)在更新下另一種方式。原理是當(dāng)浮動層打開時称诗，禁止滑動觸摸的默認(rèn)事件萍悴，然后在浮動層內(nèi)時，用js代碼變動scrollTop來模擬滑動效果寓免。
好癣诱，入正題！
OK袜香，first things first撕予！ github項目地址
截圖
HTML 結(jié)構(gòu)
<div class="mfix">
<a href="javascript:;">關(guān)閉</a>
<article>
<p>節(jié)選自《三體》 叛亂</p>
<p>《三體 》三部曲（又名“地球往事“三部曲）是劉慈欣撰寫的史詩級巨作，是一部非常典型的硬科幻作品蜈首，堪稱目前為止中國當(dāng)代最杰出的科幻小說实抡。這部作品講述了地球文明在宇宙中的興衰歷程欠母，書中對人類歷史、物理學(xué)吆寨、天文學(xué)艺蝴、社會學(xué)、哲學(xué)鸟废、宗教都有涉及猜敢，從科幻的角度對人性進行了深入探討，格局宏大盒延，立意高遠缩擂，出版后備受讀者與媒體的贊譽，被普遍認(rèn)為是中國科幻文學(xué)的里程碑之作添寺，吸引和造就了無數(shù)科幻迷胯盯，也將中國科幻推上了世界的高度。2014年11月计露，由美國著名華裔科幻作家劉宇昆（Ken Liu）所翻譯該系列作品的第一部《三體》的英文版在美國上市博脑，反響熱烈，并于2015年2月20日獲得美國科幻奇幻協(xié)會“星云獎”提名票罐。第二部《The
Dark Forest》于2015年7月15號上市叉趣，翻譯者為Joel Martinsen。2015年8月23日该押，《三體》獲得雨果獎最佳長篇小說獎疗杉。[1]</p>
</article>
</div>
<div class="main">
<a href="javascript:;">開啟</a>
<p>葉文潔話音剛落，轟然幾聲巨響蚕礼，飯廳的兩扇大門同時被撞開烟具，一群端沖鋒槍的士兵沖了進來。汪淼注意到他們不是武警而是正規(guī)軍奠蹬，他們幾乎無聲地貼墻而行朝聋，很快在三體叛軍周圍形成了一個包圍圈。史強最后走了進來囤躁，皮夾克敞著懷冀痕，手里握著槍管，槍柄像一把榔頭似的露出來割以。他大大咧咧地四下看看金度。突然沖向前去，倒握著槍的手一掄严沥，響起了金屬砸在頭骨上的悶響猜极，一名三體戰(zhàn)士倒了下去，沒來得及抽出的手槍捧出老遠消玄。幾名士兵沖天鳴槍跟伏，天花板上落下一片塵土丢胚。有人拉起汪淼，飛快地跑出了三體叛軍的人群受扳，站到一排士兵后面携龟。</p>
<p>“武器都丟桌子上！誰再炸刺勘高，穿了丫的峡蟋！”史強指指身后的一排沖鋒槍說：“知道各位都是不要命的，我們也是沖不要命來的华望！我可把話擱這兒了：普通的警務(wù)和法律禁區(qū)蕊蝗，對你們已經(jīng)不適用，甚至人類的戰(zhàn)爭法則對你們也不適用了赖舟！既然你們已經(jīng)與全人類為敵蓬戚，咱們大家也都沒什么可忌諱的”鲎ィ”</p>
<p>三體叛軍的人群中有一陣騷動子漩，但并沒有大的驚慌。葉文潔不動聲色石洗。有三個人突然沖出人群幢泼，其中包括扭斷潘寒脖子的那個美麗女孩兒，他們沖向那座活動的三體藝術(shù)品劲腿，一個人抓住了顆翻飛的金屬球旭绒，緊緊托在胸前。</p>
<p>美麗女孩雙手托起晶亮的金屬球焦人，讓人聯(lián)想到身材苗條的藝術(shù)體操運動員。她又露出那動人的笑重父，用悅耳的聲音說：“各位警官花椭，我們手里拿著的是三枚原子彈，每枚當(dāng)量一千五百噸級房午，不算大矿辽，我們喜歡小玩藝兒，這是起爆開關(guān)郭厌〈螅”</p>
</div>
兩個a用來開啟和關(guān)閉 懸浮層，懸浮層用fixed定位
CSS 結(jié)構(gòu)
body {
padding: 0;
margin: 0;
}
.main {
background-color: #efefef;
line-height: 1.6;
padding: 1rem
}
.main a {
position: fixed;
z-index: 1;
padding: 0 .5rem;
text-decoration: none;
background-color: rgba(138, 150, 156, 0.87);
color: #fff
}
article {
height: 100%;
overflow-y: auto
}
.mfix {
display: none;
position: fixed;
text-align: justify;
padding: 1rem;
line-height: 1.6rem;
z-index: 3;
top: 1rem;
font-size: 15px;
bottom: 1rem;
right: 1rem;
left: 1rem;
background-color: rgba(126, 202, 247, 0.87);
}
.mfix a {
display: block;
height: 1.6rem;
width: 3rem;
top: 3px;
right: 3px;
line-height: 1.6rem;
text-align: center;
text-decoration: none;
font-size: 12px;
bottom: 1rem;
border: 1px solid #fff;
border-radius: 3px;
position: absolute;
color: #ffffff
}
JavaScript 結(jié)構(gòu)
window.onload = init()
function init() {
var fix = document.querySelector(".mfix"),
main = document.querySelector(".main"),
body = document.querySelector("body"),
articleObj = fix.getElementsByTagName("article")[0], // 獲取article元素
hetVal = mnm = 0,
aOn = document.querySelector(".main a"),
aOff = document.querySelector(".mfix a");
// 禁止默認(rèn)事件觸發(fā)
function unableTouchmove(evt) {
evt.preventDefault();
}
aOn.addEventListener("click", function(e) {
fix.style.display = "block";
// 禁止body的默認(rèn)滑動事件觸發(fā)
body.addEventListener("touchmove", unableTouchmove, {
passive: false
})
// 獲取浮動層的觸摸開始時的scrollTop和相對視屏的clientX
fix.addEventListener("touchstart", function(evt) {
startY = evt.touches[0].clientY
hetVal = articleObj.scrollTop;
console.log(hetVal);
})
// 浮動層滑動時折柠，計算滑動的差值宾娜，變更artcle的scrollTop
fix.addEventListener("touchmove", function(evt) {
mnm = evt.touches[0].clientY - startY;
articleObj.scrollTop = hetVal - mnm;
console.log(mnm);
})
});
// 關(guān)閉浮動層時，對應(yīng)的操作
aOff.addEventListener("click", function(e) {
fix.style.display = "none";
body.removeEventListener("touchmove", unableTouchmove)
});
}
js就是按照以上思路來實現(xiàn)效果的扇售，現(xiàn)在ios和Android都可以支持了前塔。相對原先的方法嚣艇，目前這個相對來說代碼有點復(fù)雜。
好了华弓，到此食零，本文告一段落！感謝您的閱讀寂屏！祝您和您的家人身體健康贰谣，闔家幸福！
