关于移动端使用局部滚动解决ios不支持position:fixed后产生的问题
来源:互联网 发布:知源中学 编辑:程序博客网 时间:2024/06/05 01:59
最近一直在想怎么解决移动端使用局部滚动解决ios不支持position:fixed后产生的问题。虽然之前写的两篇文章中都有讲到,但这两天在整理弹窗插件的时候又想到了一些问题,花了不少时间,总算是弄出了个结果。下面,就把这成果跟大家分享一下吧。
首先,我们看看问题点在哪:
1、根本在于ios设备对position:fixed的支持不理想,为了兼容这一点,需要使用局部滚动代替全局滚动;
2、在支持溢出滑动的浏览器里,局部滚动过程中很容易会出现直接拖动整个页面的情况;
3、在安卓设备中,局部滚动区域内的input标签在获得焦点后会被弹出的软键盘遮挡住。
另外,如果局部滚动布局能较完美地解决问题,那么,弹窗时也能直接通过overflow:hidden来禁止页面的滚动了。
综合分析这些问题,我想出了一套解决方案。
解决思路其实挺简单的,既然溢出拖动的机制是滚动条到达顶部或底部后继续往下或往上滑动,那么,我们不让滚动条到达顶部或底部就可以了。
var rinyScroll=function(options){ this.options=options; this.el=document.getElementById(this.options.el);};rinyScroll.prototype.scroll=function(){ if(this.el.scrollTop==0){ this.el.scrollTop=1; }; this.el.onscroll=function(){ //由于部分设备中scrollTop与clientHeight之和不完全等于scrollHeight(一般会少于),因此+1再判断是否大于等于。 if(this.scrollTop+this.clientHeight+1>=this.scrollHeight){ this.scrollTop=this.scrollHeight-this.clientHeight-1; }else if(this.scrollTop==0){ this.scrollTop=1; }; };};rinyScroll.prototype.input=function(){ var _this=this.el; _this.addEventListener('click',function(e){ var screenNowH=document.documentElement.clientHeight,inputT=e.target.offsetTop,wrapScrollTop=_this.scrollTop; window.onresize=function(){ var screenH=document.documentElement.clientHeight; //判断窗口大小改变是否为关闭软键盘,或input的所处位置是否高于软键盘打开后窗口中间以上 if(screenH==screenNowH || screenH+wrapScrollTop>=inputT+(screenH/2)){ return; }; var t=inputT-(screenH/2); _this.scrollTop=t; }; },false); };
这套代码主要解决了局部滚动容易造成整个页面拖动以及局部滚动区域内的input标签在获取焦点后被弹出的软键盘遮挡住的问题,可以直接复制回去实例化使用。
//el为局部滚动元素的idvar myScroll=new rinyScroll({ el:'box'});myScroll.scroll();myScroll.input();
这套解决方案虽然不能称之为完美,但适用范围广,可复用性强,也便于页面的后期维护。就个人测试结果来看,比起那些禁止默认事件的做法要好很多。
当然,各位还有什么更好的做法不妨分享一下,让大家学习学习。
阅读全文
0 0
- 关于移动端使用局部滚动解决ios不支持position:fixed后产生的问题
- 解决IE6不支持position:fixed的问题
- 解决IE6不支持position:fixed;的问题
- 解决IE6不支持position:fixed;的问题
- 解决IE不支持position:fixed问题
- ios解决输入框弹出后position:fixed失效问题
- 关于IE6不支持position:fixed的解决办法
- 解决IE6不支持position:fixed
- 关于移动端使用position:fixed出现抖动情况解决方法
- 移动端web页面使用position:fixed问题总结
- 移动端web页面使用position:fixed问题总结
- phonegap插件-使用ios原生输入框解决position fixed的显示问题
- IE6不支持position:fixed问题
- 解决position: fixed;不兼容IE7的问题,由于IE6不支持些属性,可以不管
- 移动端position:fixed滑动问题
- 解决IE6不支持position:fixed的方法,非常简单
- 完美解决IE6不支持position:fixed的bug
- 完美解决IE6不支持position:fixed的bug
- Python迭代器,可迭代对象,生成器
- NEUQ oj-1102高级机密
- K80服务器安装tensorflow
- 深入理解 CSS 中的行高与基线及line-height的用法详解二
- Java基础之for循环案例
- 关于移动端使用局部滚动解决ios不支持position:fixed后产生的问题
- NEUQ oj-1203人见人爱A+B
- 问题 M: 蟠桃记
- http和socket之长连接和短连接区别
- 算法分析与设计第十四周
- 第18章 驱动开发之字符设备应用程序
- 第一
- 如何使用python搭建一个高性能的网站
- 设计模式讲解与代码实践(二十三)——模板方法