记一次解决CSS定位bug思路

事因

网站中的遮罩层大都有一个问题，就是在这个遮罩层中滑动，里面的内容也会跟着滑动，我是这样想的，既然都有这个问题，干脆写一个通用的插件出来，省的每个还得单独处理。如果是单独处理这个问题是比较好解决的，关键问题是，我想写的这个插件是，你直接在有问题的页面中引入这个插件就行，而不需要做其他的任何事情，而难就难在这，因为我们不知道什么时候需要阻止滑动，什么时候是正常滑动。

灵感

下班后的路上在想，虽然我们不知道是哪段代码引起的，但如果我们能够分析出什么时候会发生这件事，那就解决了一半的问题，而什么时候会发生我们是可以知道的，在问出这个问题的时候就可以知道，既然是因为在弹出层中滑动引起的，那么也就是说在滚动的时候会发生这件事。而我的想法就是在滚动事件中加一个判断，如果是正常滚动那么就不做任何处理，而如果是由其他DOM冒泡导致里面的内容发生滚动的，那么就不让它滚动。

也就是类似下面这段代码

window.addEventListener("scroll",function(event){
    if(非正常滚动){
       .....
   }
});

实践

那么我们怎么知道它是不是正常滚动，一开始我想的是获取event对象中的target属性，之所以我想获取这个属性是因为它能够确定当前正在活动的DOM，而如果我们能够知道当前活动的DOM是什么，也就可以用它来判断是不是非正常滚动，因为如果body是活动状态，那么就属于正常滚动了，而如果是其他的那么就属于非正常滚动。但遗憾的是，不管是在遮罩层中引发的滚动还是直接在body中滚动，event.target获取到的都是body，也就是说此路不通。

虽然说直接用event.target失败了，但我想一定有能够获取到当前活动的DOM，虽然以前没用过，也没听说过，于是我就将event打印出来，看看它里面都有哪些属性，注意是打印两次，一次是正常滚动的数据，一次是非正常滚动的数据，把它们对比一下。不看不知道，一对比还真发现了点什么，event.target中有一个activeElement属性，而这个正是我苦苦寻找的，从名字上看也能够看出点什么，“活动元素”，怪我无知，还以为自己javascript学的有多好，竟然这个属性都没用过。

有了这个发现以后，我们的代码就变成下面这样啦

window.addEventListener("scroll",function(event){
    if(event.target.activeElement.tagName.toLowerCase()!=="body"){
       解决bug代码
   }
});

解决bug倒也简单，直接给html或者body添加一个overflow:hidden;就ok了，代码如下

window.addEventListener("scroll",function(event){
    if(event.target.activeElement.tagName.toLowerCase()!=="body"){
       document.all[0].style.overflow= "hidden";
   }
});

我这里是给html添加的，防止代码被其他同事窜改，因为body比较多人操作。

虽然上面已经解决了很大一部分问题，但还有一个问题得解决，那就是当遮罩层被关闭我们应该去掉html的overflow:hidden;不然文档超出的部分就看不见了。而我们现在需要解决的问题就是，怎么知道遮罩层被关闭？

分析了一下，所有的遮罩层基本上都是通过点击事件来关闭的，也就是说我们可以通过监听点击事件来去掉html的overflow:hidden;不过直接用click事件会有些问题，有时不会被触发，我这里用的是touchend事件，至于为什么不用touchstart也是有原因的，等等再说，现在我们的代码变成了下面这样

document.addEventListener("touchend",function(){
    document.all[0].style.overflow= "auto";
});

window.addEventListener("scroll",function(event){
    if(event.target.activeElement.tagName.toLowerCase()!=="body"){
       document.all[0].style.overflow= "hidden";
   }
});

运行以上代码，我们很快发现了一个新问题，它会出现一卡一卡的，仔细分析，发现直接在touchend事件中改变html的overflow是有问题的，因为不是所有情况都是属于关闭遮罩层的，有可能是在里面正常的滚动，而滚动就需要我们点击一下遮罩层，前面也就是因为忽略了这件事导致卡顿现象的，你想象一下，一下取消一下又不取消，这不是纠结吗。

所以我们还得想另外一个办法，我想到的是，判断一下是属于点击事件，还是滑动事件，至于怎么区分的话，我用了一个计数器，但这个计数器大于2的话就属于滑动事件，代码如下

var count = 0;

document.addEventListener("touchmove",function(){
    count++;
});

document.addEventListener("touchend",function(){
    if(count<2){
        document.all[0].style.overflow= "auto";
    }
    count = 0;
});

window.addEventListener("scroll",function(event){
    if(event.target.activeElement.tagName.toLowerCase()!=="body"){
       document.all[0].style.overflow= "hidden";
   }
});

到此就结束啦，还有一件事没说，那就是之所以使用touchend事件而没有使用touchstart事件，是因为touchstart在touchmove后不会执行，因此会造成count有时没有被清零。

虽然这个插件确实可以用，但还是有一点点的问题没办法解决，自己测试一下就明白了。

总结

这一次还是蛮有挑战的，倒不是说有多难，关键是要学会把问题看清，把问题分析清楚。要解决的问题是什么？已知什么？通过已知的可以解决什么问题？这也是本次实践的收获吧。