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

 更新时间: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

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

相关文章

  • 前端算法题解leetcode49-字母异位词分组

    前端算法题解leetcode49-字母异位词分组

    这篇文章主要为大家介绍了前端算法leetcode49-字母异位词分组解题示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 项目中常用的 .env 文件原理源码解析

    项目中常用的 .env 文件原理源码解析

    这篇文章主要为大家介绍了项目中常用的 .env 文件原理源码解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • Ant Design 的Bug修复示例详解

    Ant Design 的Bug修复示例详解

    这篇文章主要为大家介绍了Ant Design 的Bug修复示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • 微信小程序 Image组件实例详解

    微信小程序 Image组件实例详解

    这篇文章主要介绍了微信小程序 Image组件实例详解的相关资料,需要的朋友可以参考下
    2016-09-09
  • JavaScript 中有了Object 为什么还需要 Map 呢

    JavaScript 中有了Object 为什么还需要 Map 呢

    Map 是用于存储键值的,而 JavaScript 中对象也是由键值对组成的,那么 Map 存在的意义是什么呢?下面文章小编就来向大家详细介绍吧,需要的朋友可以参考下
    2021-09-09
  • canvas 中如何实现物体的框选

    canvas 中如何实现物体的框选

    这篇文章主要为大家介绍了canvas中如何实现物体的框选的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • commander脚手架工具使用详解

    commander脚手架工具使用详解

    这篇文章主要为大家介绍了commander脚手架工具使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 新闻内页-JS分页

    新闻内页-JS分页

    新闻内页-JS分页...
    2006-06-06
  • 载入进度条 效果

    载入进度条 效果

    载入进度条 效果...
    2006-07-07
  • Three.js Interpolant实现动画插值

    Three.js Interpolant实现动画插值

    这篇文章主要为大家介绍了Three.js Interpolant实现动画插值示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02

最新评论