开始在开发微信页面的时候，拉黑边的情况很常见，有时还会影响体验，于是开发了wScrollFix库隐藏微信的黑边是什么？npm地址github地址黑色边框是什么？相信很多微信做web开发的同学都会发现，当页面滚动到顶部或者底部的时候，如果继续滑动，整个页面就会下滑，露出顶部或者下面的黑色底部，domain当前访问页面的名称信息被标记在黑色底部，黑色边框的作用也很明显，因为微信中的浏览器没有像传统浏览器的地址栏一样的设计，为了在某级防钓鱼网站，下拉显示域名信息，如下图，WechatIMG1.jpeg在什么情况下会出现黑边？当滚动到底部时，如果继续操作，就会出现上面的黑边。情况分析上面我们分析了微信浏览器出现黑边的情况。接下来说说怎么解决。根据以上思路，我们可以解决以下几种情况。对于不需要滚动的页面，我们可以直接在preventDefault中直接去掉body元素的touch事件，这样页面的根元素就不会响应页面上的滚动事件了。第二种情况是页面上有滚动元素，不能使用情况一的方案，用了之后整个页面的滚动就失效了，只能另辟蹊径了。回想一下我们刚才的黑色边框的样子。当scrollTop为0时，继续操作会让浏览器出现黑边，所以我们可以让滚动不要到顶部scrollTop<=0，也不要到底部，这样向上滑动和滑动时就不会出现黑边下降到极限。第三种情况是第二种情况的特例，即当列表不是静态的，而是动态加载时，一些操作，比如在列表加载前滑动，或者默认scrollTop为0时继续滑动加载后向上，可能会出现黑边。解决方案对于我封装的wScrollFix库，主要的解决方案就是上面提到的case2和case3。对于情况1，直接按照上面的方法绑定触摸事件即可。先说下案例2的解决方法：代码如下，可以看到这个方法接受一个参数，用于获取滚动的容器元素，首先将scrollTop设置为1，然后在touchstart中检测页面元素的滚动,scroll,touchmove事件保证scrollTop在1和底部高度减1之间，这样情况3就不会出现黑边了，其实动态列表后需要把scrollTop改为1插入。这里我使用了MutationObserver解决方案。代码如下：代码使用了防抖来防止多次频繁回调，回调部分的逻辑也比较简单，就是把scrollTop改成1wScrollFix封装wScrollFix很好用，直接可以通过npmiwscrollfix导入模块，也可以直接从github下载导入./dist/wScrollFix.js，会全局暴露wScrollFix方法。使用方法是将容器元素对象或选择器作为参数调用wScrollFix。如果出现情况3，需要再传一个true，即wScrollFix(el,true)有wScrollFix的github和npm地址，给个star。看官~
