固定悬浮层不触发底下页面滑动效果

前端入坑纪 44

如题，取名不易，请原谅这一长条题名！这是个不大不小的效果，原先的处理是在悬浮层上滑动时，不触发下面的body移动。
小伙伴反应不支持ios，现在更新下另一种方式。原理是当浮动层打开时，禁止滑动触摸的默认事件，然后在浮动层内时，用js代码变动scrollTop来模拟滑动效果。

好，入正题！

OK，first things first！ github项目地址

截图

HTML 结构

    

        关闭
        

            
节选自《三体》 叛乱
            
《三体 》三部曲（又名“地球往事“三部曲）是刘慈欣撰写的史诗级巨作，是一部非常典型的硬科幻作品，堪称目前为止中国当代最杰出的科幻小说。这部作品讲述了地球文明在宇宙中的兴衰历程，书中对人类历史、物理学、天文学、社会学、哲学、宗教都有涉及，从科幻的角度对人性进行了深入探讨，格局宏大，立意高远，出版后备受读者与媒体的赞誉，被普遍认为是中国科幻文学的里程碑之作，吸引和造就了无数科幻迷，也将中国科幻推上了世界的高度。2014年11月，由美国著名华裔科幻作家刘宇昆（Ken Liu）所翻译该系列作品的第一部《三体》的英文版在美国上市，反响热烈，并于2015年2月20日获得美国科幻奇幻协会“星云奖”提名。第二部《The
                Dark Forest》于2015年7月15号上市，翻译者为Joel Martinsen。2015年8月23日，《三体》获得雨果奖最佳长篇小说奖。[1]
        


    
    

        开启
        
叶文洁话音刚落，轰然几声巨响，饭厅的两扇大门同时被撞开，一群端冲锋枪的士兵冲了进来。汪淼注意到他们不是武警而是正规军，他们几乎无声地贴墙而行，很快在三体叛军周围形成了一个包围圈。史强最后走了进来，皮夹克敞着怀，手里握着枪管，枪柄像一把榔头似的露出来。他大大咧咧地四下看看。突然冲向前去，倒握着枪的手一抡，响起了金属砸在头骨上的闷响，一名三体战士倒了下去，没来得及抽出的手枪捧出老远。几名士兵冲天鸣枪，天花板上落下一片尘土。有人拉起汪淼，飞快地跑出了三体叛军的人群，站到一排士兵后面。
        
“武器都丢桌子上！谁再炸刺，穿了丫的！”史强指指身后的一排冲锋枪说：“知道各位都是不要命的，我们也是冲不要命来的！我可把话搁这儿了：普通的警务和法律禁区，对你们已经不适用，甚至人类的战争法则对你们也不适用了！既然你们已经与全人类为敌，咱们大家也都没什么可忌讳的。”
        
三体叛军的人群中有一阵骚动，但并没有大的惊慌。叶文洁不动声色。有三个人突然冲出人群，其中包括扭断潘寒脖子的那个美丽女孩儿，他们冲向那座活动的三体艺术品，一个人抓住了颗翻飞的金属球，紧紧托在胸前。
        
美丽女孩双手托起晶亮的金属球，让人联想到身材苗条的艺术体操运动员。她又露出那动人的笑，用悦耳的声音说：“各位警官，我们手里拿着的是三枚原子弹，每枚当量一千五百吨级，不算大，我们喜欢小玩艺儿，这是起爆开关。”


    

两个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都可以支持了。相对原先的方法，目前这个相对来说代码有点复杂。

好了，到此，本文告一段落！感谢您的阅读！祝您和您的家人身体健康，阖家幸福！