禁止微信浏览器的下拉滑动

解决思路：

1 先禁止body的滚动事件

2 再给需要scroll的元素加上自定义的滚动事件

注：加入此代码后要给需要scroll的元素加上.scroll的class

    var overscroll = function (els) {for (var i = 0; i < els.length; ++i) {var el = els[i];el.addEventListener('touchstart', function () {var top = this.scrollTop, totalScroll = this.scrollHeight, currentScroll = top + this.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) {this.scrollTop = 1;} else if (currentScroll === totalScroll) {this.scrollTop = top - 1;}});el.addEventListener('touchmove', function (evt) {//if the content is actually scrollable, i.e. the content is long enough//that scrolling can occurif (this.offsetHeight < this.scrollHeight)evt._isScroller = true;});}};//禁止body的滚动事件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();}});//给class为.scroll的元素加上自定义的滚动事件overscroll(document.querySelectorAll('.scroll'));

禁止微信浏览器的下拉滑动相关推荐

移动端 -- 禁止苹果微信浏览器的下拉回弹
需求:实现页面中有个可拖动的悬浮球问题:在ios中,由于微信浏览器存在下拉回弹的特性,所以悬浮球拖拽的时候会引起整个页面的拖动,所以需要禁止掉浏览器默认事件,这样在拖动悬浮球时就不会出现问题了解决 ...
html游戏禁止微信浏览器下拉,JavaScript实现禁止微信浏览器下拉回弹效果
这篇文章主要为大家详细介绍了JavaScript禁止微信浏览器下拉回弹效果的方法,具有一定的参考和学习JavaScript的价值,对JavaScript感兴趣的小伙伴们可以参考一下本篇文章本文实例为 ...
html 禁止页面回弹,JavaScript禁止微信浏览器下拉回弹效果
本文实例为大家分享了JavaScript禁止微信浏览器下拉回弹的效果,供大家参考,具体内容如下方法1: var overscroll = function(el){ el.addEventListe ...
阻止微信浏览器下拉滑动效果（ios11.3 橡皮筋效果）
在升级到 ios11.3 系统后,发现之前阻止页面滚动的代码e.preventDefault代码失效了.于是自己折腾了一番,找到了解决办法,分享给大家. 一.前言浏览器在移动端有一个默认触摸滚动的效 ...
html下拉刷新原理,微信小程序下拉刷新及上拉加载原理解析
这篇文章主要介绍了微信小程序下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.下拉刷新的概念及应用场景. 概念: 下拉 ...
android 自定义Scrollview实现淘宝二层楼效果新版微信小程序下拉效果
android 自定义Scrollview实现淘宝二层楼效果新版微信小程序下拉效果由于最近一段时间真的是太忙了,没有顾上即使更新博客,还请粉丝们见谅,最近要实现这样一个效果,这个效果跟淘宝二层楼和新 ...
微信小程序下拉框插件_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
打造Android微信朋友圈下拉刷新控件
打造Android微信朋友圈下拉刷新控件> 转载于:https://www.cnblogs.com/zhujiabin/p/5707789.html
解决手机浏览器顶部下拉出现网页源或刷新的问题
解决手机浏览器顶部下拉出现网页源或刷新的问题参考文章: (1)解决手机浏览器顶部下拉出现网页源或刷新的问题 (2)https://www.cnblogs.com/qhorse/p/7955011.h ...

禁止微信浏览器的下拉滑动

禁止微信浏览器的下拉滑动

禁止微信浏览器的下拉滑动相关推荐

最新文章

热门文章