此方法在安卓6的自带下拉刷新的APP内无效。
做移动app项目时,用的是app内嵌webview的方法,遇到问题。
在安卓6中,app原生自带下拉刷新,与界面内的下滑冲突。
开始考虑通过在touchmove时阻止默认事件解决,但event.preventDefault()是会把所有事件都阻止了。
即使阻止完再移除监听事件,也不行,这是个持续的过程,因为无法改变APP的原生内容。此路不通。
建议让开发app的人员解决这个问题。如果此路不通,考虑其他方法。
考虑用iScroll插件解决,插件iScroll的原理是通过css的transform效果实现。
iScroll 文档:/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时,没能精准计算出移动距离。做个纪念吧。。。