微信浏览器禁止页面下拉查看网址(不影响页面内部scroll)

摘要:
function(event){event.prpreventDefault();false);varoverscroll=function(el){el.addEventListener('touchstart‘,function(){vartop=el.sollTop,currentScroll=top+el.offsetHeight;

开发项目跑在微信浏览器经常会遇到一个问题,微信浏览器下拉的时候会出现自带的黑色底色(显示网址)如下图:

微信浏览器禁止页面下拉查看网址(不影响页面内部scroll)第1张

此类事件是手机touchmove默认事件行为,可以通过js代码隐藏事件:

$(‘body’).on(‘touchmove’, function (event) {event.preventDefault();});
or
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 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) {
      el.scrollTop = 1;
    } else if(currentScroll === totalScroll) {
      el.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(el.offsetHeight < el.scrollHeight)
      evt._isScroller = true;
  });
}
overscroll(document.querySelector('.scroll'));
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();
  }
});

详情见:
prevent-overscroll

免责声明:文章转载自《微信浏览器禁止页面下拉查看网址(不影响页面内部scroll)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇web中如何写log日志Mac下发布Unity3d中Android平台下出现“android (invokation failed)”的错误下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

ODOO 新API修饰符

Odoo8中,API接口分为traditaional style和record style两种类型: traditional style指的就是我们在7.0中使用的类型,def(self,cr,uid,ids,context)式的语法. record style 8.0及以后版本精简化参数后的风格,只保留了self和args,形如def(self,args...

【巷子】---fetch---基本使用

一、fetch   fetch是一种XMLHttpRequest的一种替代方案,在工作当中除了用ajax获取后台数据外我们还可以使用fetch、axios来替代ajax  二、安装      执行npm install whatwg-fetch --save即可安装。   为了兼容老版本浏览器,还需要安装npm install es6-promise --...

yii框架中findall方法取数据使用总结,包括select各种条件,where条件,order by条件,limit限制等

在yii框架中可以使用映射类的find方法取出一条数据或者用findall方法取出数条数据来,那么如何按照所需条件来取数据呢,主要用到了CDbCriteria这个类,这个类是yii自带的操作数据库的支持类,可以作为参数传递给find等方法,这里用findall做个例子: 比如我要取出videoinfo表中的'v_id','title','big_class...

vue 之 ESLint学习(格式化操作)

  在vscode 的右下角 有一个eslint 可以控制 在vscode保存时对代码格式化存在的因素: 第一个因素:存在vscode插件的原因 第二个因素: 查看代码是否符合standar规范: https://standardjs.com/rules-zhcn.html 查看具体细则:https://cn.eslint.org/docs/rules/...

drf 三大认证详解

目录 drf 三大认证: 认证: 权限:认证与权限组件绑定使用: 频率:多方式登录: drf 三大认证: 认证: # 全局配置: -在全局(认证组件只能决定request.user,不是断定权限的地方,所以一般配置全局) REST_FRAMEWORK = { # 认证组件 'DEFAULT_AUTHENTI...

SQL server 主键自增ID 错乱

1.报错如下,插入数据时,报主键不满足约束,重复ID。   怀疑自增长ID 有问题,百度一下,可以查询和修改自增长ID的值。   //取最新自动增长值  select ident_current('表名')  然后使用 DBCC CHECKIDENT ('table_name', RESEED,new_reseed_value) 语句将该值指定为new_...