微信浏览器禁止页面下拉查看网址实例详解

 更新时间:2017年06月28日 15:39:18   投稿:lqh  
这篇文章主要介绍了微信浏览器禁止页面下拉查看网址实例详解的相关资料,需要的朋友可以参考下

微信浏览器禁止页面下拉查看网址实例详解

此类事件是手机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();
 }
});

详情见:https://github.com/luster-io/prevent-overscroll/blob/master/index.html

源码下载:http://xiazai.jb51.net/201706/yuanma/preventoverscrollmaster(jb51.net).rar

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • Uncaught EvalError:Refused to evaluate a string as JavaScript解决

    Uncaught EvalError:Refused to evaluate a

    这篇文章主要为大家介绍了Uncaught EvalError:Refused to evaluate a string as JavaScript解决分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • JavaScript函数柯里化

    JavaScript函数柯里化

    这篇文章主要介绍了JavaScript函数柯里化,柯里化即Currying是把接受多个参数的函数变换成接受一个单一参数函数,并且返回接受余下的参数且返回结果的新函数的技术,下面文章详细内容,需要的朋友可以参考一下
    2021-11-11
  • electron渲染进程主进程相互传值示例解析

    electron渲染进程主进程相互传值示例解析

    这篇文章主要为大家介绍了electron渲染进程主进程相互传值示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • 微信小程序 页面滑动事件的实例详解

    微信小程序 页面滑动事件的实例详解

    这篇文章主要介绍了微信小程序 页面滑动事件的实例详解的相关资料,希望通过本文能帮助到大家,让大家实现这样的功能,需要的朋友可以参考下
    2017-10-10
  • 文本加密解密

    文本加密解密

    文本加密解密...
    2006-06-06
  • await 错误捕获实现方式源码解析

    await 错误捕获实现方式源码解析

    这篇文章主要为大家介绍了await 错误捕获实现方式源码示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • 微信小程序之选项卡的实现方法

    微信小程序之选项卡的实现方法

    这篇文章主要介绍了 微信小程序之选项卡的实现方法的相关资料,希望大家通过本文能实现这样的功能,需要的朋友可以参考下
    2017-09-09
  • 微信公众号  提示:Unauthorized API function 问题解决方法

    微信公众号 提示:Unauthorized API function 问题解决方法

    这篇文章主要介绍了微信公众号 提示:Unauthorized API function 问题解决方法的相关资料,这里提供了出现提示的解决方法,需要的朋友可以参考下
    2016-12-12
  • js中ES6继承和ES5继承之间的差别

    js中ES6继承和ES5继承之间的差别

    这篇文章主要介绍了ES6继承和ES5继承,以及两个继承之间的差别,文中运用示例以及代码讲解的非常清晰,感兴趣的小伙伴可以参考一下
    2021-08-08
  • 微信小程序组件 contact-button(客服会话按钮)详解及实例代码

    微信小程序组件 contact-button(客服会话按钮)详解及实例代码

    这篇文章主要介绍了微信小程序组件 contact-button(客服会话按钮)详解及实例代码的相关资料,需要的朋友可以参考下
    2017-01-01

最新评论