微信滑动黑色是怎么回事?微信滑动黑色如何处理?

时间：2023-07-01 14:05 阅读数：159 人阅读分类：知识百科

　　微信滑动黑色是怎么回事?微信滑动黑色如何处理?当遇到微信滑动出现黑色模块的时候，可以借鉴以下以下的处理方法，以下是小编整理的对微信滑动黑色模块的介绍。

　　由于公司接触微信页面较多，

　　所以一度被微信下拉出黑的这种情况生无可恋，

　　所以花了较长时间去实践了各种方法(一脸懵逼.jpg)

　　好吧，经过各种方法尝试后，发觉竟然还是可以简单解决的，一脸憋屈...

　　普遍流传的方法是屏蔽掉 body 的 touchstart 或 touchmove 事件，但也会让所有滚动不可用，只适用部分页面

　　所以我就把重心放在了如何让滚动依旧可用上，乃至屏蔽所有的事件自写一个滚动容器(弹*拖动和避免卡顿要疯...)

　　而后来发现，直接屏蔽掉当 scrollTop 在顶部时的 touchmove 不就好了吗，真是走了好多弯路

　　15function stopDrop(stillCanScroll) {

　　var lastY;

　　$("body").off().on('touchstart.stop', function(event) {

　　lastY = event.originalEvent.changedTouches[0].clientY;

　　}).on('touchmove.stop', function(event) {

　　var y = event.originalEvent.changedTouches[0].clientY;

　　var st = $(stillCanScroll).scrollTop();

　　// 向上滚动且滚动条位于顶部，屏蔽事件

　　if (y > lastY && st < 5) {

　　event.preventDefault();

　　return false;

　　}

　　lastY = y;

　　});

　　}

　　该怎么去评价这段代码吗，反正不高效就对了，

　　正在实践多个 stillCanScroll 的情况，但又实在害怕检测该元素 touchstart 而造成的事件混淆，

　　理论上确实能解决出黑底的问题，但依旧不能根除，而且还把下拉刷新刷新的功能搞没了。

　　就这样吧，这个问题解决办法的寻求将抗日持久....

　　----------------- 2017.04.20 补充

　　后来看了一个博主的代码后有些启发，所以现在使用下面这版

　　63if (!HTMLElement.currentStyle) {

　　function _getStyle(prop) {

　　var _s = window.getComputedStyle(this, null)

　　return prop ? _s[prop] : _s;

　　}

　　HTMLElement.prototype.currentStyle = _getStyle;

　　HTMLElement.prototype.getStyle = _getStyle;

　　}

　　// 阻止微信下拉出黑底插件

　　function PreventScroll() {

　　// // 非微信浏览器直接跳出 -- 后来发现好些浏览器都有这个坑，所以去掉

　　// var ua = navigator.userAgent.toLowerCase();

　　// if (!ua.match(/MicroMessenger/i)) return;

　　var elem = arguments || []; // 传入绑定的元素

　　var $elem = []; // 存储所有需要监听的元素

　　// 获取需要监听的元素

　　for (var i=0,len=elem.length; i

　　var $e = document.querySelectorAll(elem[i]);

　　if (!$e) {console.error('您输入的元素不对，请检查'); return;}

　　for(var j=0; j<$e.length; j++) {

　　if ($e[j].currentStyle('overflow').match(/auto|scroll/i)) {

　　$elem.push($e[j]);

　　}

　　window.addEventListener('touchstart', function(e){

　　window.scroll_start = e.touches[0].clientY;

　　});

　　window.addEventListener('touchmove', prevent);

　　function prevent(e) {

　　var status = '11'; // 1容许 0禁止，十位表示向上滑动，个位表示向下滑动

　　var startY = window.scroll_start;

　　var currentY = e.touches[0].clientY;

　　var direction = currentY - startY > 0 ? '10' : '01'; // 当前的滚动方向，10 表示向上滑动

　　$elem.forEach(function(ele){

　　var scrollTop = ele.scrollTop,

　　offsetHeight = ele.offsetHeight,

　　scrollHeight = ele.scrollHeight;

　　if (scrollTop === 0) {

　　// 到顶，禁止向下滑动，或高度不够，禁止滑动

　　status = offsetHeight >= scrollHeight ? '00' : '01';

　　} else if (scrollTop + offsetHeight >= scrollHeight) {

　　// 到底，则禁止向上滑动

　　status = '10';

　　}

　　});

　　// output.innerHTML = status + ' ' + ++count;

　　// 如果有滑动障碍，如到顶到底等

　　if (status != '11') {

　　if (!(parseInt(status, 2) & parseInt(direction, 2))) {

　　e.preventDefault();

　　return;

　　}

　　1PreventScroll('.main', '.header', '.footer');

　　以上是小编整理的微信滑动黑色的内容，希望以上内容能对您有帮助。如果您想了解到更多的微信素材，请多多关注微素达网。更多精彩内容欢迎您来。