微信浏览器禁止页面下拉查看网址

最新推荐文章于 2026-05-15 05:22:57 发布

原创最新推荐文章于 2026-05-15 05:22:57 发布 · 5.4k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

javascript

微信

本文探讨了在微信浏览器中防止用户下拉时显示网址的黑底问题。通过分析初始的JavaScript禁止滚动的不足，提出了一种新的解决方案，旨在既保持原生滚动效果，又能有效阻止网址显示。

我们经常会遇到这样的情况就是在微信浏览器下拉网页时会显示带有网址的黑底，如图：

那如何禁止出现这样的情形呢？

一开始我使用如下代码来禁止：

$(‘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();
  }
});

标签

#微信 #javascript