ios下使用overflow scroll情况下,到达最极端的情况时会拖动整个页面的解决办法
2013-06-24 16:09
309 查看
今天开发ipad webapp时,遇到个问题就是在支持内部滚动(overflow:scroll)的页面中,在滚到到最极端(最上或者最下时),会拖动整个页面,带来不好的用户体验。
方法一,从网上找到的:
方法二自己想出来的,因为我发现非最极端(非最上或者最下时)时,就不会拖动整个页面,那么问题就简单了:
方法一,从网上找到的:
function preventOverScroll(scrollPane) { // See http://www.quirksmode.org/js/events_order.html var CAPTURE_PHASE = true; // happens first, outside to inside var BUBBLE_PHASE = false; // happens second, inside to outside // These variables will be captured by the closures below var allowScrollUp = true, allowScrollDown = true, lastY = 0; scrollPane.addEventListener (‘touchstart’, function (e) { // See http://www.w3.org/TR/cssom-view/#dom-element-scrolltop allowScrollUp = (this.scrollTop > 0); allowScrollDown = (this.scrollTop < this.scrollHeight – this.clientHeight); // Remember where the touch started lastY = e.pageY; }, CAPTURE_PHASE); // If the touch is on the scroll pane, don’t let it get to the // body object which will cancel it scrollPane.addEventListener (‘touchmove’, function (e) { var up = (event.pageY > lastY); var down = !up; lastY = event.pageY; // Trying to start past scroller bounds if ((up && allowScrollUp) || (down && allowScrollDown)) { // Stop this event from propagating, lest // another object cancel it. e.stopPropagation(); } else { // Cancel this event event.preventDefault(); } }, CAPTURE_PHASE); }
方法二自己想出来的,因为我发现非最极端(非最上或者最下时)时,就不会拖动整个页面,那么问题就简单了:
scrollPane.addEventListener('touchstart', function(){ if(this.scrollTop === 0){ //滚动到1 this.scrollTop =1; }else if(this.scrollTop == this.scrollHeight - this.clientHeight){ //滚动到最低端-1 this.scrollTop =this.scrollHeight - this.clientHeight -1; } }, true);
相关文章推荐
- iOS 使用UITabBarController时需要将一张视图覆盖整个屏幕的解决办法:
- iOS使用Sencha Touch、ExtJs6 Modern或iscroll等框架时,文本框聚焦的光标不跟随页面(文本框)滚动 的解决办法
- 解决办法之“超时时间已到。超时时间已到,但是尚未从池中获取连接。出现这种情况可能是因为所有池连接均在使用,并且达到了最大池大小 ”
- iOS开发遇到的坑之六--使用cocopods管理第三方库时,编译出现Library not found for -lPods问题的解决办法
- iOS开发----Xcode7升级之后插件无法使用与不小心点击Skipbundle的解决办法
- sharepoint 页面使用javascript出错解决办法
- rails无法使用页面缓存的解决办法
- iOS开发----Xcode7升级之后插件无法使用与不小心点击Skipbundle的解决办法
- JSP页面中使用JSTL标签出现无法解析问题解决办法
- 解决办法之“超时时间已到。超时时间已到,但是尚未从池中获取连接。出现这种情况可能是因为所有池连接均在使用,并且达到了最大池大小 ”
- 在使用FireFox浏览器时,经常打开新标签,页面总是不断自动刷新,解决办法!
- js 页面history.back()返回上一页,ios 不重新加载ready的解决办法
- 使用easyui layout 布局的时候部分页面遮住的解决办法
- JSP页面中使用JSTL标签出现无法解析问题解决办法
- SqlBulkCopy excel 字段映射解决办法二 使用数字索引代替 字段名称 做映射 避免字段中有中文 大小写等情况
- JSP页面中使用JSTL标签出现无法解析问题解决办法
- 彻底解决使用Struts2的项目中页面中特殊情况乱码!
- iOS ARC下内存泄露的几种情况和解决办法
- 移动端开发,IOS、iPhone,表单input元素获取焦点时页面被放大的解决办法。
- iOS中使用RegexKitLite来试用正则表达式 使用ARC 20个错误解决办法 mark