禁止上滑下滑的时候出现微信浏览器的黑色背景 -云博客

禁止上滑下滑的时候出现微信浏览器的黑色背景

# 微信 2024-05-05 14:15 0 55 来源：云博客

转载：http://blog.csdn.net/yingzhi3104/article/details/78730342

网页加载完调用

$(function(){ var overscroll = function (els) { for (var i = 0; i < els.length; ++i) { var el = els[i]; el.addEventListener(‘touchstart‘, function () { var top = this.scrollTop , totalScroll = this.scrollHeight , currentScroll = top + this.offsetHeight; //If we‘re at the top or the bottom of the containers //scroll, push up or down one pixel. // //this prevents the scroll from "passing through" to //the body. if (top === 0) { this.scrollTop = 1; } else if (currentScroll === totalScroll) { this.scrollTop = top - 1; } }); el.addEventListener(‘touchmove‘, function (evt) { //if the content is actually scrollable, i.e. the content is long enough //that scrolling can occur if (this.offsetHeight < this.scrollHeight) evt._isScroller = true; }); } }; //禁止body的滚动事件 document.body.addEventListener(‘touchmove‘, function (evt) { //In this case, the default behavior is scrolling the body, which //would result in an overflow. Since we don‘t want that, we preventDefault. if (!evt._isScroller) { evt.preventDefault(); } }); //给class为.scroll的元素加上自定义的滚动事件 overscroll(document.querySelectorAll(‘.scroll‘)); })

如果页面中有需要滚动的元素，在div加上scroll类

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #4f5d66 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #4a8a01 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #929151 }
span.s1 { color: #929151 }
span.s2 { color: #4a8a01 }
span.s3 { color: #48565d }
span.s4 { color: #ad42ef }
span.s5 { color: #698906 }
span.s6 { color: #4f5d66 }
span.s7 { color: #d16400 }

html{

width: 100%;

height: 100%;

overflow: hidden;