最近一直在想怎么解决移动端使用局部滚动解决ios不支持position:fixed后产生的问题。虽然之前写的两篇文章中都有讲到,但这两天在整理弹窗插件的时候又想到了一些问题,花了不少时间,总算是弄出了个结果。下面,就把这成果跟大家分享一下吧。
首先,我们看看问题点在哪:
1、根本在于ios设备对position:fixed的支持不理想,为了兼容这一点,需要使用局部滚动代替全局滚动;
2、在支持溢出滑动的浏览器里,局部滚动过程中很容易会出现直接拖动整个页面的情况;
3、在安卓设备中,局部滚动区域内的input标签在获得焦点后会被弹出的软键盘遮挡住。
另外,如果局部滚动布局能较完美地解决问题,那么,弹窗时也能直接通过overflow:hidden来禁止页面的滚动了。
综合分析这些问题,我想出了一套解决方案。
解决思路其实挺简单的,既然溢出拖动的机制是滚动条到达顶部或底部后继续往下或往上滑动,那么,我们不让滚动条到达顶部或底部就可以了。
var rinyScroll=function(options){