前端入坑纪 44
如题，取名不易，请原谅这一长条题名！这是个不大不小的效果，原先的处理是在悬浮层上滑动时，不触发下面的body移动。
小伙伴反应不支持ios，现在更新下另一种方式。原理是当浮动层打开时，禁止滑动触摸的默认事件，然后在浮动层内时，用js代码变动scrollTop来模拟滑动效果。
好，入正题！
OK，first things first！ github项目地址
截图
HTML 结构
<div class="mfix">
<a href="javascript:;">关闭</a>
<article>
<p>节选自《三体》 叛乱</p>
<p>《三体 》三部曲（又名“地球往事“三部曲）是刘慈欣撰写的史诗级巨作，是一部非常典型的硬科幻作品，堪称目前为止中国当代最杰出的科幻小说。这部作品讲述了地球文明在宇宙中的兴衰历程，书中对人类历史、物理学、天文学、社会学、哲学、宗教都有涉及，从科幻的角度对人性进行了深入探讨，格局宏大，立意高远，出版后备受读者与媒体的赞誉，被普遍认为是中国科幻文学的里程碑之作，吸引和造就了无数科幻迷，也将中国科幻推上了世界的高度。2014年11月，由美国著名华裔科幻作家刘宇昆（Ken Liu）所翻译该系列作品的第一部《三体》的英文版在美国上市，反响热烈，并于2015年2月20日获得美国科幻奇幻协会“星云奖”提名。第二部《The
Dark Forest》于2015年7月15号上市，翻译者为Joel Martinsen。2015年8月23日，《三体》获得雨果奖最佳长篇小说奖。[1]</p>
</article>
</div>
<div class="main">
<a href="javascript:;">开启</a>
<p>叶文洁话音刚落，轰然几声巨响，饭厅的两扇大门同时被撞开，一群端冲锋枪的士兵冲了进来。汪淼注意到他们不是武警而是正规军，他们几乎无声地贴墙而行，很快在三体叛军周围形成了一个包围圈。史强最后走了进来，皮夹克敞着怀，手里握着枪管，枪柄像一把榔头似的露出来。他大大咧咧地四下看看。突然冲向前去，倒握着枪的手一抡，响起了金属砸在头骨上的闷响，一名三体战士倒了下去，没来得及抽出的手枪捧出老远。几名士兵冲天鸣枪，天花板上落下一片尘土。有人拉起汪淼，飞快地跑出了三体叛军的人群，站到一排士兵后面。</p>
<p>“武器都丢桌子上！谁再炸刺，穿了丫的！”史强指指身后的一排冲锋枪说：“知道各位都是不要命的，我们也是冲不要命来的！我可把话搁这儿了：普通的警务和法律禁区，对你们已经不适用，甚至人类的战争法则对你们也不适用了！既然你们已经与全人类为敌，咱们大家也都没什么可忌讳的。”</p>
<p>三体叛军的人群中有一阵骚动，但并没有大的惊慌。叶文洁不动声色。有三个人突然冲出人群，其中包括扭断潘寒脖子的那个美丽女孩儿，他们冲向那座活动的三体艺术品，一个人抓住了颗翻飞的金属球，紧紧托在胸前。</p>
<p>美丽女孩双手托起晶亮的金属球，让人联想到身材苗条的艺术体操运动员。她又露出那动人的笑，用悦耳的声音说：“各位警官，我们手里拿着的是三枚原子弹，每枚当量一千五百吨级，不算大，我们喜欢小玩艺儿，这是起爆开关。”</p>
</div>
两个a用来开启和关闭 悬浮层，悬浮层用fixed定位
CSS 结构
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 结构
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");
// 禁止默认事件触发
function unableTouchmove(evt) {
evt.preventDefault();
}
aOn.addEventListener("click", function(e) {
fix.style.display = "block";
// 禁止body的默认滑动事件触发
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);
})
});
// 关闭浮动层时，对应的操作
aOff.addEventListener("click", function(e) {
fix.style.display = "none";
body.removeEventListener("touchmove", unableTouchmove)
});
}
js就是按照以上思路来实现效果的，现在ios和Android都可以支持了。相对原先的方法，目前这个相对来说代码有点复杂。
好了，到此，本文告一段落！感谢您的阅读！祝您和您的家人身体健康，阖家幸福！
网友评论