微信浏览器禁止页面下拉查看网址
我们经常会遇到这样的情况就是在微信浏览器下拉网页时会显示带有网址的黑底,如图:
那如何禁止出现这样的情形呢?
一开始我使用如下代码来禁止:
$(‘body’).on(‘touchmove’, function (event) {event.preventDefault();}); 或者 document.addEventListener('touchmove', function(e){e.preventDefault()}, false);
然而这并不能很好的解决问题,因为这样他把原生的scroll效果给禁止了,于是我又冥思苦想了很久,使用如下代码可解决浏览器下拉出现网址这个问题:
var overscroll = function(el) { el.addEventListener('touchstart', function() { var top = el.scrollTop , totalScroll = el.scrollHeight , currentScroll = top + el.offsetHeight; if(top === 0) { el.scrollTop = 1; } else if(currentScroll === totalScroll) { el.scrollTop = top - 1; } }); el.addEventListener('touchmove', function(evt) { if(el.offsetHeight < el.scrollHeight) evt._isScroller = true; }); } overscroll(document.querySelector('.scroll')); document.body.addEventListener('touchmove', function(evt) { if(!evt._isScroller) { evt.preventDefault(); } });