移动端下拉刷新与页面内滑动冲突问题 iscroll 固定行表头苹果下拉反弹

此方法在安卓6的自带下拉刷新的APP内无效。

做移动app项目时，用的是app内嵌webview的方法，遇到问题。

在安卓6中，app原生自带下拉刷新，与界面内的下滑冲突。

开始考虑通过在touchmove时阻止默认事件解决，但event.preventDefault()是会把所有事件都阻止了。

即使阻止完再移除监听事件，也不行，这是个持续的过程，因为无法改变APP的原生内容。此路不通。

建议让开发app的人员解决这个问题。如果此路不通，考虑其他方法。

考虑用iScroll插件解决，插件iScroll的原理是通过css的transform效果实现。

iScroll 文档：http://caibaojian.com/iscroll-5/

demo：固定表头滚动（移动端）如果表格很长，不止需要纵向滚动，还需要横向和表头一起滚动。

html:

<head><script src="js/iscroll-probe.js"></script></head>
<div id="c"><div class="m">sdmdonifoinvomsldmkcoerijoaopmr</div><div class="f"><ul class="d"><li>a</li><li>b</li><li>c</li><li>d</li><li>e</li></ul></div>
</div>

css：

这里 body 要加属性 position:fixed; 防止苹果手机下拉反弹问题。

这里 f 的 overflow-y 要设置成hidden，因为苹果手机兼容问题。

html,body,div,ul,li{margin:0;padding:0;
}
#c{position:relative;width:500px;background-color: #f5e79e;overflow-y:hidden;overflow-x:auto;
}
.m{width:600px;height:50px;background-color: #2d6ca2;
}
.f{position:relative;width:600px;height:400px;background-color: #2ECC40;overflow-y:auto;
}
.d{width:600px;height:800px;background-color: #cccccc;
}
li{display:block;height:100px;list-style: none;font-size:28px;
}

js：

var myScroll=new IScroll(".f",{scrollbars: true,//显示滚动条bounce:false,//反弹动画不显示eventPassthrough:'horizontal',//横向滚动条保持原生，纵向滚动条使用iScrollfadeScrollbars:true,//淡入淡出
});

自己做过尝试，通过阻止默认事件，改变要滚动元素的margin-top或者top，来做滚动效果，但在touchmove时，没能精准计算出移动距离。做个纪念吧。。。

移动端下拉刷新与页面内滑动冲突问题 iscroll 固定行表头苹果下拉反弹相关推荐

uniapp下拉刷新避坑指南
uniapp下拉刷新 uniapp的下拉刷新有两个方法, 一种是整体的下拉刷新, 使用页面生命周期函数onPullDownRefresh; 另外一种是局部的下拉刷新也叫自定义下拉刷新, 使用scrpl ...
uniapp 实现下拉刷新功能
1.在需要下拉刷新的页面上进行定义 -- pages.json support : 是否开启窗口下拉功能 style : 下拉刷新的样式 "default" -- 经典下拉刷新样式 ...
自定义下拉刷新之仿AcFun下拉刷新
俗话说好记性不如烂笔头,决定以后将研究过的东西写到博客里,方便自己以后查找,也方便技术分享.第一篇从基础的自定义下拉刷新开始.这里说下,我是在大神的肩膀上进行自定义的,因为自己重写下拉刷新的话会有很多 ...
[ vant ] vue移动端下拉刷新组件
学习关键语句: vant list组件和下拉刷新 vant 下拉刷新和局部滚动冲突写在前面每一次 ! 我是说每一次我在使用 vant 组件库里面 list组件和下拉刷新连在一起用的时候都会出现下 ...
移动端下拉刷新，兼容ios，Android及微信浏览器
先看一下效果图下拉效果的样子参考的新浪微博,滚动加载是ydui的滚动加载组件因为滚动加载使用的ydui的组件,我这里便不再累述在线体验点这里首先分析下拉刷新是怎么实现的 1.页面滚动到顶部时, ...
手机页面下拉刷新效果
在做手机页面的时候我用的是MUI封装好的JavaScript. 为了实现下拉刷新的功能,大多数H5框架都是通过DIV模拟下拉回弹动画,在Android手机上,DIV动画常常会出现卡顿现象,mui通过使 ...
小程序下拉刷新，恢复页面原样
小程序下拉刷新,恢复页面原样下拉刷新走的是下面的方法 onPullDownRefresh: function() {} 在刷新并请求数据之后,需要手动结束下拉刷新的状态,才能恢复列表的原样.不然,下 ...
Vant-ui 移动端下拉刷新
这个是基于上一篇文章,上拉加载更多,继续的下拉刷新这里面利用到了 vant组件库里的 PullRefresh 下拉刷新时会触发 refresh 事件,在事件的回调函数中可以进行同步或异步操作,操作完 ...
html 下拉滚动加载,原生js滚动到底部加载数据和下拉刷新 Scrollload
初衷如今移动端站点越来越多,滚动到底部加载数据和下拉刷新的需求非常的常见,即使现在很多pc站点也会有这样的需求,比如百度首页就有.虽然简单的完成这么一个功能非常方便,但是滚动往往会成为性能的瓶颈,处 ...

移动端下拉刷新与页面内滑动冲突问题 iscroll 固定行表头苹果下拉反弹

移动端下拉刷新与页面内滑动冲突问题 iscroll 固定行表头苹果下拉反弹相关推荐

最新文章

热门文章

移动端下拉刷新与页面内滑动冲突问题 iscroll 固定行表头 苹果下拉反弹

移动端下拉刷新与页面内滑动冲突问题 iscroll 固定行表头 苹果下拉反弹相关推荐

最新文章

热门文章

移动端下拉刷新与页面内滑动冲突问题 iscroll 固定行表头苹果下拉反弹

移动端下拉刷新与页面内滑动冲突问题 iscroll 固定行表头苹果下拉反弹相关推荐