此类事件是手机touchmove默认事件行为,可以通过js代码隐藏事件:
$(‘body’).on(‘touchmove’, function (event) {event.preventDefault();}); or document.addEventListener('touchmove', function(e){e.preventDefault()}, false); or document.body.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(); } }); 作者:我是7号_frank 链接:https://www.jianshu.com/p/2eddee561971 來源:简书 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
相关推荐
微信浏览器禁止页面下拉查看网址实例详解 此类事件是手机touchmove默认事件行为,可以通过js代码隐藏事件: $(‘body').on(‘touchmove', function (event) {event.preventDefault();}); or document....
本文实例为大家分享了JavaScript禁止微信浏览器下拉回弹的效果,供大家参考,具体内容如下 方法1: [removed] var overscroll = function(el){ el.addEventListener('touchstart', function(){ var top = el....
微信小程序scroll-view下拉刷新(附带下拉刷新效果) 使用说明 https://blog.csdn.net/u012308481/article/details/102619511
今日准备把微信小程序的下拉刷新做一下,没想到我绑定了bindscrolltolower事件,但是居然不触发,我设置了lower-threshold高度无济于事.最后经过不懈的努力,找了很多资料,才发现,居然要设置scroll-view高度,于是我...
微信下拉弹性效果其实是浏览器本身的一种特性,重点就是scroll值的一种体现; 处理策略: 1、直接禁止mobile端的touchmove事件; 这种策略一般适用页面只有一屏不需要下拉情况下使用; var touch1 = function(){ ...
针对 iOS端禁止列表顶部下拉和底部上拉露出浏览器灰色背景 的解决方案。
在微信小程序中scroll-view沿y轴进行滚动时需要设定固定高度,现通过样式和布局实现高度自适应不设定高度
是当微信小程序的下拉刷新功能不符合场景、或者不适用时候的替代方案。提供了类似手机端chrome浏览器的下拉刷新效果(当然没有那么酷炫)。 支持场景 scroll-view swiper中嵌套使用scroll-view 使用了自定义顶导...
H5手指下滑弹出负一屏, 阻止移动端浏览器内置下拉刷新功能,具体实例代码如下所示: <div class=outer-scroll> 默认隐藏,负一屏,手指下滑即可弹出显示,上滑隐藏 <div class=scroll-box> 正式内容 ...
在微信小程序的文档中,使用scroll-view标签,然后给它设置一个scroll-x就可以实现元素,横向排列,可以左右滑动。。。。 然而,在实际开发中,发现并不是这么简单。。。贴上部分wxml和wxss代码… <!-- ...
这篇文章主要介绍了微信小程序iOS下拉白屏晃动问题解决方案,文中通过示例代码介绍的非常详细,对大家的...这样的话页面整个都拉不动了,下面溢出的内容就拉不出来了,此时用overflow:scroll间接滑动 .content{ width
在微信小程序中,使用 scroll-view 实现长页面的标记跳转,官方文档中没有例子演示,锚点标记主要是使用<scroll> 的 scroll-into-view 属性。 实现锚点跳转主要以下几点: 1、最外层容器使用 scroll-view 2、...
开发中,有时列表使用<scroll-view>来实现滚动效果,然而在实现上拉加载,下拉刷新 的时候,希望可以在<scroll-view>中来实现拖拽效果,而不是使用wx.startPullDownRefresh()去展示整个页面的拖拽。 这里选择使用 ...
微信小程序,使用scroll-view实现下拉加载更多(下一页)源码。 可查看文章:http://blog.csdn.net/dKnightL/article/details/76724205
社交应用中,onPullDownRefresh下拉加载历史消息,与页面上的消息合并,滚动到下拉之前,页面不闪
infinitescroll的下拉刷新的例子, 本人也是初学,请大家多多指教
jquery onepage-scroll单页面应用-微信全屏滚... jquery onepage-scroll单页面应用-微信全屏滚...
用swiper-slide模仿微信小程序之scroll-view,可显示三个的滑动区块,描述的不太清楚,我不知道怎么贴图片,就是类似京东的滑动menu区块
微信小程序开发中scroll-view实现左右滑动时的布局样式,样式的编写,欢迎大家参考和提意见微信小程序开发中scroll-view实现左右滑动时的布局样式,样式的编写,欢迎大家参考和提意见
微信小程序中的<scroll-view>用法应用实例,实现查询全部、待付款、待发货、带评价、售后信息的功能、整理源码分享。